目標：
在設(shè)計網(wǎng)站的初步階段，我們會想要讓navbar flash footer三者兼容，本文期待的效果是：
- navbar在最上方，不遮擋主體內(nèi)容
- flash緊靠navbar（在其下方），但是沒有flash時隱藏；并且與主題內(nèi)容之間無留白
- footer在最下方，不遮擋主體內(nèi)容。
問題：
但是試來試去，出現(xiàn)各種折磨人的問題：
- navbar沒有全屏，全屏后遮住了網(wǎng)站的主體部分；
- flash被navbar遮住了，與主體部分之間有空白；
- footer跑到了頁面中部，footer遮住了主體部分！
這些問題是大多數(shù)人在初步實現(xiàn)網(wǎng)站的時候會遇到的，問題雖然小，但是極容易把新手卡死，導致失去信心無法開始下一步。
在網(wǎng)上搜索答案的時候卻試了一個又一個，最終沒有一個有用，最終導致心理崩潰，可能放棄編程。
以上就是我的經(jīng)歷，現(xiàn)在這個問題被我解決了，所以寫下這篇技術(shù)&心理貼，共勉：
解決原理與心理輔導：
問題1：明白做css是要做什么？
回答1：css就是裝修，就是用html程序碼首先把頁面切分成一塊一塊的區(qū)域，然后在css文檔中用css程序碼規(guī)定每一個區(qū)域的位置，顏色，大小，形狀···
也就是說：
我們上面遇到的問題，其實就是一個簡單的擺位置的問題。
又因為每個人首先對自己頁面用html程序碼所做的切割各不相同，所以當你去網(wǎng)上搜索解決方案的時候，你就會發(fā)現(xiàn)更種各樣五花八門的辦法，而可能每一個都不適合你（而你在上一篇帖子中copy的程序碼往往只會解決一部分問題，所以你得繼續(xù)搜索，找到新的后你又不舍得刪去原來的程序碼，因為其真的解決了部分問題，導致原來的代碼又成為了問題得不到解決的原因之一····死循環(huán)）。 - 典型的驢唇不對馬嘴而不自知（說我自己呢）。
解決方案：
- 我是這樣切割頁面的。（注意：怎樣切割頁面決定了后邊css怎么調(diào)整頁面 - 所以要復制就是整篇復制，不復制需要認真分析拆解得出自己的方法后再操作）
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)站名稱</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; //頁腳高度，可隨意設(shè)置
background-color: #263238;
color: #E0E0E0;
}
歡迎大家提出更高效的方法，隨時更新本帖
