rails装修技术：navbar flash footer 兼容实作

目标：

在设计网站的初步阶段，我们会想要让navbar flash footer三者兼容，本文期待的效果是：

1. navbar在最上方，不遮挡主体内容
2. flash紧靠navbar（在其下方），但是没有flash时隐藏；并且与主题内容之间无留白
3. footer在最下方，不遮挡主体内容。

问题：

但是试来试去，出现各种折磨人的问题：

1. navbar没有全屏，全屏后遮住了网站的主体部分；
2. flash被navbar遮住了，与主体部分之间有空白；
3. footer跑到了页面中部，footer遮住了主体部分！

这些问题是大多数人在初步实现网站的时候会遇到的，问题虽然小，但是极容易把新手卡死，导致失去信心无法开始下一步。
在网上搜索答案的时候却试了一个又一个，最终没有一个有用，最终导致心理崩溃，可能放弃编程。

以上就是我的经历，现在这个问题被我解决了，所以写下这篇技术&心理贴，共勉：

解决原理与心理辅导：

问题1：明白做css是要做什么？
回答1：css就是装修，就是用html程序码首先把页面切分成一块一块的区域，然后在css文档中用css程序码规定每一个区域的位置，颜色，大小，形状···

也就是说：
我们上面遇到的问题，其实就是一个简单的摆位置的问题。
又因为每个人首先对自己页面用html程序码所做的切割各不相同，所以当你去网上搜索解决方案的时候，你就会发现更种各样五花八门的办法，而可能每一个都不适合你（而你在上一篇帖子中copy的程序码往往只会解决一部分问题，所以你得继续搜索，找到新的后你又不舍得删去原来的程序码，因为其真的解决了部分问题，导致原来的代码又成为了问题得不到解决的原因之一····死循环）。 - 典型的驴唇不对马嘴而不自知（说我自己呢）。

解决方案：

1. 我是这样切割页面的。（注意：怎样切割页面决定了后边css怎么调整页面 - 所以要复制就是整篇复制，不复制需要认真分析拆解得出自己的方法后再操作）

  
    
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  
  
      

        <%= render "common/navbar" %>
      
      

        <%= render "common/flashes" %>
      
      

        <%= yield %>
      
        <%= render "common/footer" %>
  

2. 我的css是这样写的，app/assets/stylesheets/application.scss

.html {height: 100%;} //父级元素高度撑满整个屏幕

.body {
  position: relative;
  margin-bottom: 50px; /* 一定要和footer的高度一致 */
  min-height: 100%;
} //父级元素高度撑满整个屏幕

.content {
  min-height: 100%; //让整个容器最低也要占满一屏幕
  padding-bottom: 50px; //这个高度要和页脚高度一致
  margin-bottom: -50px; //大小也要和页脚高度一致
}

/*******************
        flash
********************/
.customed-flash {
  margin: 50px 0px -20px 0px; // 會將 flash 訊息往上移。
  border-radius: 0;//圆角为0
}

/*******************
        Footer
********************/
.footer {
  position: auto;
  bottom: 0;
  width: 100%;
  z-index: 1000; /* 确保页面滑动的时候，字体不会从上面滑下去 */
  height: 50px; //页脚高度，可随意设置
  background-color: #263238;
  color: #E0E0E0;
}

欢迎大家提出更高效的方法，随时更新本帖