Footer positioning with absolute positioned content
Question
I've made a codepen at http://codepen.io/anon/pen/vNVMRE
I know how to make a sticky footer. However, in my case my content (.moveDown) needs to be positioned absolute, because of that the footer doesn't stick at the bottom. You can check that in the codepen. If you make the window smaller until you have scroll bars, the footer moves over the content and stays in the new position; Of course I could make the .movedown div relative by changing the code on line 40 & 41 to
position: relative;
top: 0;
But then my mobile version gets problems. I have made a simplified version @ http://lettherobots.be/test2/ As you can see, the footer works until there's a scroll bar.
If you scale the window to max-size 460 there's a vertical menu which can be accessed through the hamburger. If I make the position of the content wrapper (.moveDown) relative, then the links in my vertical navigation become inactive. I have tried fixing that with z-index, but that didn't solve the problem.
Any idea how I can get this fixed? How I can get a footer at the end of my documents even if the content of the page
Some of the code: Html:
<body>
<div class="container">
<div class="navContainer">
<nav class="horizontalNav">
....
</nav>
<nav class="verticalNav" id="verticalMenu">
...
</nav>
</div>
<div class="content moveDown clearfix">
<header>
<img src="images/headerPic.jpg" alt="Header picture">
</header>
<div class="htmlWrapper">
{$importedContent}
</div>
</div>
<footer>bla bla</footer>
</div>
CSS
.moveDown {
left: 0;
margin: 0 auto;
padding: 0;
position: absolute;
right: 0;
top: 60px;
width: 100%;
z-index: -2;
-webkit-transition: top 300ms ease;
-moz-transition: top 300ms ease;
-o-transition: top 300ms ease;
-ms-transition: top 300ms ease;
transition: top 300ms ease;
}
1 answers
solution1
0 2015-11-09 17:51:02
You can't stick only with position:absolute, because absolute elements is positioned according to first parent relative element. You can fix at the bottom of some div, but it is static, so it can't move according to scroll. There is an excelent explanation at CSS-tricks where you can see this differentes.
See this example below:
html{ height: 100%; } body { margin: 0; padding: 0; height: 100%; position: relative; } html { height: 100%; } .clearfix::after, section::after, header::after, footer::after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } .container { min-height: 100%; position: relative; } .navHorizontal { height: 60px; text-align: right; background-color: #eee; } nav.navHorizontal a { display: inline-block; } .content { padding-bottom: 100px; position: absolute; top:60px; width: 100%; } header img { width: 100%; height: 100px; } footer { background-color: #ddd; position: absolute; bottom: 0; height: 100px; width: 100%; }
<div class="container"> <div class="navContainer"> <nav class="navHorizontal"> <section> <div class="linkSection"> <a href="#">Home</a> <a href="#">Portfolio</a> <a href="#">Tutorials</a> <a href="#">Contact</a> </div> </section> </nav> </div> <div class="content clearfix"> <header> <img src="http://placehold.it/200x100"> </header> <div> <h1>Some text here</h1> </div> <div> Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper. Phasellus fringilla posuere urna, ut porttitor nisi. </div> <div> Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper. Phasellus fringilla posuere urna, ut porttitor nisi. </div> <footer>Footer Content</footer> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.