Question

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

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

感谢。

Answer 1

这是一个页眉和页脚粘性的布局，希望这能让你朝着正确的方向前进。

＆＃13;

$(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);
    

    
})

＆＃13;

* {
	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;
}

＆＃13;

<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>

＆＃13;

请看小提琴是如何工作的 http://jsfiddle.net/z4sL8upt/3/

Answer 2

欢迎来到SO！

基本思路：你可以通过position：absolute或position：fixed（和top：0和bottom：0分别）得到页眉和页脚的定位，并获得使用定位，边距和包装的主要内容DIV。这将是矫枉过正，但你可以google＆＃34; fait sticky footer＆＃34;为页脚。这将是严重的过度杀伤，但你可以google＆＃34; portamento js＆＃34;为标题。

这是一个非常广泛的问题，有一种＆＃34;我如何开发我的网站＆＃34;感觉。你可能会得到一些瑕疵（就像你立即收到的downvote - 我已经将其归结为零以至于不会因为你在这里的新事而惩罚你 - 编辑：有人打败我 - ），那就是为什么我给出了广泛的答案。我已经包含了矫枉过正的答案，因为可能只是最快的方式，即使它不是学习和理解html / css的最佳方式

具有侧面导航和内容区域的CSS3 / HTML5粘滞页眉/页脚

2 个答案: