0
J'essaie de créer un site Web réactif qui a un en-tête fixe, une barre latérale fixe pour une navigation verticale et un pied de page collant en bas. En ce moment je suis sur un en-tête position fixe et la barre latérale et le bien savoir collant de bas de page de css-tricks.com: https://css-tricks.com/snippets/css/sticky-footer/Pied de page collant avec entête fixe et barre latérale fixe
Ma mise en œuvre: http://jsfiddle.net/p7wp16kx/4/
Pour une raison quelconque le pied de page collante ne fonctionne pas pour cette implémentation car elle ne colle pas au fond de mon contenu. Une idée de ce qui pourrait être le problème ici ou une solution alternative?
Les snippets HTML et 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>
Je cherchais un pied de page collante, ce qui est tout à fait différent d'un pied de page fixe. Mais le pied de page collant ccs-tricks lié dans ma question a bien fonctionné avec la disposition proposée par vous Jordan, merci pour cela. Cela m'a aidé à travailler pour une solution de travail. – KCDC