具有側面導航和內容區域的CSS3 / HTML5粘性頁眉/頁腳

Question

我正在嘗試使用CSS3實現網頁布局，其中頁眉和頁腳很粘。 還有一個左側導航框架，該框架從標題延伸到瀏覽器頁面的底部。 一旦內容超出頁面底部，導航欄便可以滾動。 最后，有一個正確的內容框架，該框架從頁眉延伸到頁腳。 一旦內容超出頁腳，內容框架也可以滾動。

我已經搜索了該網站以及其他網站，但似乎找不到我想要的東西。 有沒有人實施過這樣的布局或為我指明了正確的方向。

謝謝。

Answer 1

這是頁眉和頁腳不粘的布局，希望它能使您朝正確的方向發展。

 $(document).ready(function () { // Get sizes var docHeight = $( document ).height(); var docWidth = $( document ).width(); var headerHeight = $('.header').height(); var footerHeight = $('.footer').height(); var contentHeight = $('.content').height(); var sidebarHeight = docHeight-headerHeight-footerHeight; var sidebarWidth = $('.sidebar').width(); // Set sidebar height if(contentHeight < sidebarHeight) { $('.sidebar').height(sidebarHeight); } else { $('.sidebar').height(contentHeight); } // set content width $('.content').width(docWidth - sidebarWidth); }) 

 * { margin: 0; } html, body { height: 100%; } #container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 100px; } .footer { background-color: pink; position: fixed; bottom: 0; width: 100%; } .header { background-color: red; position: fixed; width: 100%; height: 100px; } #content-wrapper { padding-top: 100px; padding-bottom: 100px; } .sidebar { width: 200px; background-color: blue; float: left; padding-bottom: 100px; } .content { float: left; padding-bottom: 100px; background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="header">Header</div> <div id="content-wrapper"> <div class="sidebar"> Sidebar </div> <div class="content"> Hello World <br/> <img src="http://placehold.it/500x500" /><br/> Hello World <br/> </div> </div> <div class="push"></div> </div> <div class="footer">footer</div> 

參見小提琴以了解其工作原理http://jsfiddle.net/z4sL8upt/3/

Answer 2

歡迎來到SO！

基本思想：您可以使用position：absolute或position：fixed（分別分別是top：0和bottom：0）來獲得頁眉和頁腳的位置，並獲得與定位，頁邊距以及包裝div有關的主要內容。 這將是過大的殺傷力，但是您可以在谷歌上搜索“ fait sticky footer”。 這將是嚴重的矯kill過正，但是您可以使用Google“ portamento js”作為標題。

這是一個非常廣泛的問題，具有“如何開發網站”的感覺。 您可能會對此感到有些畏懼（例如您立即收到的反對意見-我已將其投票贊成歸零，以免因為您是新來者而受到懲罰-edit：有人擊敗了我-），這就是為什么我給廣泛的答案。 我提供了過大的答案，因為這可能對您來說是最快的方法，即使它並不是真正學習和理解html / css的最佳方法