【问题标题】:CSS3/HTML5 Sticky Header/Footer With Side Nav and Content Area带有侧导航和内容区域的 CSS3/HTML5 粘性页眉/页脚
【发布时间】:2015-01-18 10:26:53
【问题描述】:

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

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

谢谢。

【问题讨论】:

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

标签: html css header footer sticky


【解决方案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 的最佳方法

    【讨论】:

      猜你喜欢
      • 2012-12-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-03
      • 1970-01-01
      • 2013-12-27
      • 1970-01-01
      相关资源
      最近更新 更多