Menu
If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower if the body content pushed it)? Note: I don't want to add any of markup to the page.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Here is some copy paste html. How do I need to modify the css to make it work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
article {
display: inline-block;
height: auto;
width: 69%;
}
aside {
display: inline-block;
height: auto;
width: 30%;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<aside>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</aside>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>
312
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section. I will explain few ways to keep or stick the footer to the bottom of the page if there is not enough content.
Just wrap your . container and your . footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.
Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
/*below for illustration only*/
background: yellow;
}
#Header {
position: relative;
z-index: 1;
height: 60px;
margin-bottom: -60px;
/*below for illustration only*/
background: red;
opacity: .8;
}
#Article {
float: left;
min-height: 100%;
width: 69.9%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: blue;
}
#Aside {
float: left;
min-height: 100%;
width: 30%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: green;
}
#Article:before,
#Aside:before {
content: ' ';
display: block;
height: 60px;
width: 100%;
}
#Article:after,
#Aside:after {
content: ' ';
display: block;
height: 30px;
width: 100%;
}
#Footer {
position: relative;
z-index: 1;
height: 30px;
margin-top: -30px;
clear: left;
/*below for illustration only*/
background: pink;
opacity: .8;
}
</style>
HTML is just:
<body>
<div id="Header">Header</div>
<div id="Article">Article</div>
<div id="Aside">Aside</div>
<div id="Footer">Footer</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
