Я пытаюсь создать отзывчивый веб-сайт с фиксированным заголовком, фиксированной боковой панелью для вертикальной навигации и липким нижним колонтитулом внизу. На данный момент я использую заголовок и боковую панель с фиксированным положением, а также хорошо известный липкий нижний колонтитул css-tricks.com: https://css-tricks.com/snippets/css/sticky-footer/
Моя реализация: http://jsfiddle.net/p7wp16kx/4/
По какой-то причине липкий нижний колонтитул не работает для этой реализации, поскольку он не прикрепляется к нижней части моего контента. Любая идея, в чем может быть проблема или альтернативное решение?
The HTML and CSS Snippets:
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>
