带有侧导航和内容区域的 CSS3/HTML5 粘性页眉/页脚

Posted 2023-03-21

【中文标题】带有侧导航和内容区域的 CSS3/HTML5 粘性页眉/页脚

【英文标题】：CSS3/HTML5 Sticky Header/Footer With Side Nav and Content Area

【发布时间】：2015-01-18 10:26:53

【问题描述】：

我正在尝试使用 CSS3 实现网页布局，其中页眉和页脚是粘性的。还有一个左侧导航框架，从标题延伸到浏览器页面的底部。一旦内容超出页面底部，侧导航框架就可以滚动。最后，有一个从页眉延伸到页脚的正确内容框架。一旦内容超出页脚，内容框架也可以滚动。

我已经搜索过这个网站和其他网站，但我似乎无法找到我正在寻找的确切内容。有没有人实现过这样的布局或指出我正确的方向。

谢谢。

【问题讨论】：

为什么不将所有内容拆分为一个小里程碑，分别搜索每个解决方案并将它们添加到您的项目中？ PS在这里问之前，你应该告诉我们你尝试了什么..

【参考方案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/

【参考方案2】：

欢迎来到 SO！

基本思想：您可以使用 position:absolute 或 position:fixed（分别为 top:0 和 bottom:0）来获取页眉和页脚的定位，并使用定位、边距和可能的换行来获取主要内容分区。这将是矫枉过正，但你可以谷歌“fait sticky footer”作为页脚。这将是严重矫枉过正，但你可以谷歌“portamento js”作为标题。

这是一个非常广泛的问题，有一种“我如何开发我的网站”的感觉。您可能会因此而受到抨击（例如您立即收到的反对票-我已将其投票回零，以免因您是新来的而受到惩罚-编辑：有人击败了我-），这就是为什么我要给广泛的答案。我已经包含了矫枉过正的答案，因为 可能 对你来说只是最快的方法，即使它并不是学习和理解 html/css 的最佳方法