目标：
在设计网站的初步阶段，我们会想要让navbar flash footer三者兼容，本文期待的效果是：
- navbar在最上方，不遮挡主体内容
- flash紧靠navbar（在其下方），但是没有flash时隐藏；并且与主题内容之间无留白
- footer在最下方，不遮挡主体内容。
问题：
但是试来试去，出现各种折磨人的问题：
- navbar没有全屏，全屏后遮住了网站的主体部分；
- flash被navbar遮住了，与主体部分之间有空白；
- footer跑到了页面中部，footer遮住了主体部分！
这些问题是大多数人在初步实现网站的时候会遇到的，问题虽然小，但是极容易把新手卡死，导致失去信心无法开始下一步。
在网上搜索答案的时候却试了一个又一个，最终没有一个有用，最终导致心理崩溃，可能放弃编程。
以上就是我的经历，现在这个问题被我解决了，所以写下这篇技术&心理贴，共勉：
解决原理与心理辅导：
问题1：明白做css是要做什么？
回答1：css就是装修，就是用html程序码首先把页面切分成一块一块的区域，然后在css文档中用css程序码规定每一个区域的位置，颜色，大小，形状···
也就是说：
我们上面遇到的问题，其实就是一个简单的摆位置的问题。
又因为每个人首先对自己页面用html程序码所做的切割各不相同，所以当你去网上搜索解决方案的时候，你就会发现更种各样五花八门的办法，而可能每一个都不适合你（而你在上一篇帖子中copy的程序码往往只会解决一部分问题，所以你得继续搜索，找到新的后你又不舍得删去原来的程序码，因为其真的解决了部分问题，导致原来的代码又成为了问题得不到解决的原因之一····死循环）。 - 典型的驴唇不对马嘴而不自知（说我自己呢）。
解决方案：
- 我是这样切割页面的。（注意：怎样切割页面决定了后边css怎么调整页面 - 所以要复制就是整篇复制，不复制需要认真分析拆解得出自己的方法后再操作）
<!DOCTYPE html>
<html>
<head>
<title>网站名称</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="content">
<%= render "common/navbar" %>
</div>
<div class="customed-flash">
<%= render "common/flashes" %>
</div>
<div>
<%= yield %>
</div>
<%= render "common/footer" %>
</body>
</html>
- 我的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;
}
欢迎大家提出更高效的方法，随时更新本帖
