固定页眉和固定侧边栏的粘性页脚

Question

我正在尝试构建一个响应式网站，该网站具有固定的页眉、用于垂直导航的固定侧边栏和底部的粘性页脚。目前我正在使用固定位置的页眉和侧边栏以及众所周知的 css-tricks.com 的粘性页脚：https://css-tricks.com/snippets/css/sticky-footer/

我的实现： http://jsfiddle.net/p7wp16kx/4/

出于某种原因，粘性页脚不适用于此实现，因为它没有粘在我的内容底部。知道这里可能有什么问题或替代解决方案吗？

HTML 和 CSS 片段：

header{
    position: fixed;
    top: 0px;
    left: 20%;
    height: 150px;
    width:70%;
    max-width: 1000px;
    text-align: right;
    padding: 40px 0 0;
    z-index: 3;
    background-color: blue;
}
.sidebar{
    position: fixed;
    left: 10%;
    top: 0;
    width: 10%;
    height: 100%;
    background-color: #000;
    z-index: 5;
}

.content{
    width: 70%;
    max-width: 1000px;
    padding: 0px 0px 30px 0px;
    position: absolute;
    top:150px;
    left: 20%;
    z-index: 1;
}

/* STICKY FOOTER */

* {
  margin: 0;
}

html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -50px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 50px; 
}
.site-footer {
  background: orange;
}

<!DOCTYPE html>
<body>

    <!-- ======= || SIDEBAR, LOGO, HEADER || ======= -->
<div class="page-wrap">
    <div class="sidebar">
       
    </div>
    
        <header>
 
        </header>
    
    <!-- ======= || CONTENT || ======= -->
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in sagittis tortor. Proin a nulla eleifend, euismod massa ac, rhoncus turpis. Donec imperdiet ex in sapien consectetur, quis molestie tellus lobortis. Nulla vehicula erat tempus, tristique velit a, dignissim justo. In hac habitasse platea dictumst. Morbi suscipit pharetra felis, at volutpat quam cursus et. Maecenas quis ligula viverra, molestie mi ac, feugiat mauris. Nullam convallis, massa et laoreet elementum, lacus neque eleifend diam, ut scelerisque nisl metus eu augue. Suspendisse fermentum ornare sem ut vehicula. Integer metus nulla, fringilla a commodo sit amet, pulvinar at nibh. Donec non tincidunt arcu. In vel pulvinar diam, vel consectetur ante.

Maecenas viverra pharetra commodo. Duis lobortis orci nec lectus laoreet varius. Phasellus pharetra nisl quam, quis ullamcorper est interdum at. Nam mollis massa nec metus molestie elementum vel non ligula. Vestibulum id iaculis arcu. Morbi risus nulla, vestibulum vel augue nec, malesuada congue risus. Donec tristique massa leo, vel bibendum est vestibulum tincidunt. Nam a suscipit dui.

Nam fermentum auctor dui, in tincidunt mi dictum vitae. Cras blandit suscipit quam ac rutrum. Cras bibendum consectetur massa ac porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque molestie efficitur eros, eu convallis erat varius varius. Integer dictum nisi vel ultrices tempus. Sed ipsum ex, maximus vel rutrum eleifend, accumsan ac enim. Nam aliquet, felis in bibendum molestie, nisi elit iaculis leo, eget tempus justo dui vel urna. Maecenas nec tortor quis erat lacinia egestas. Suspendisse sit amet hendrerit eros. Nunc enim tellus, pellentesque sit amet rutrum eget, cursus sit amet nulla. Etiam blandit urna dui, sit amet aliquet neque pulvinar eu. Nunc id scelerisque orci, porta lobortis ligula.

Maecenas eros ex, consectetur et est eget, interdum consectetur dui. In hac habitasse platea dictumst. Aenean consequat sapien sit amet fermentum blandit. Vivamus sodales mollis eros quis consectetur. Donec et metus in nisl vulputate sollicitudin sed id elit. Integer sed vulputate justo. Aenean pharetra efficitur lacus non blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam in est volutpat, semper odio ac, interdum turpis. Vivamus ipsum justo, placerat nec imperdiet non, faucibus interdum ipsum. Donec venenatis sollicitudin orci, quis pharetra libero.

Phasellus cursus nunc et lacus maximus vehicula. Nulla eu odio lectus. Etiam orci arcu, posuere ut leo ac, posuere volutpat augue. Aliquam erat volutpat. Vestibulum quam enim, facilisis commodo volutpat ut, elementum at tortor. Nulla lacinia scelerisque egestas. Vestibulum convallis in erat sed porta.   
    </div><!-- end content div-->
    </div><!-- end page-wrap -->
    
    <!-- ========= || FOOTER || ========= -->
    <footer class="site-footer">
        <h2>footer - credits - copyright</h2>
    </footer> 
      
</body>
</html>

Answer 1

你的代码有很多错误，所以我没有更正它们，我想我用语义 HTML5 标签向你展示了同样的东西，以便正确使用和清晰，更好一点 UI和 CSS 阴影 :D

Here is the JSFiddle demo

截图：

//HTML

<html>
<head>
    <link rel="stylesheet"href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <nav></nav>
    <aside></aside>
    <section></section>
    <footer></footer>
</body>
</html>

//CSS

body{
    margin: 0 !important;
    width: 100vw;
    height: 100vh;
}
nav{    
    height: 62px;
    width: 100%;
    z-index: 999;
    position: fixed;
    background: #1e67cb;    
    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
section{
    height: 300vh;
}
aside{
    left: 0;
    top: 20%;
    height: 400px;
    width: 200px;
    background: #ECF0F1;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    position: fixed;
}
footer{
    bottom: 0;
    z-index: 999;
    position: fixed;
    height: 64px;
    width: 100%;
    background: #1e67cb;
    box-shadow: 0 -1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.6);  
}

固定页眉和固定侧边栏的粘性页脚

Sticky footer with fixed header and fixed sidebar

html

css

sidebar

fixed

sticky-footer