How do I keep the site footer at the bottom of the window?
The footer coding is naive, if there is not enough content then there will be white space between the footer and footer. I would like to get rid of this and move the footer to the bottom of the window.
On the other hand, when there is more content, I want the content to click on the footer (so position: fixed; bottom: 0; won't be).
How can I achieve this?
+2
source to share
3 answers
There's a great tutorial out there at http://www.htmltutorialsandtips.com/css-sticky-footer that explains how to do this. It goes through the basic HTML markup and CSS is used to style it. Easy to follow and does a good job of explaining how CSS really works to get the effect.
+1
source to share
You can achieve this result:
- Declaring a height value for tags
<body>
and<html>
- A value declaration
minimum-height
for a nested wrapper element, usually an element that wraps all your streaming elements contained in a body structure
$("#addBodyContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");
});
$("#resetBodyContent").on("click", function() {
$(".flex-col p").remove();
});
$("#addFooterContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");
});
$("#resetFooterContent").on("click", function() {
$("footer p").remove();
});
html, body {
height: 91%;
}
.wrapper {
width: 100%;
left: 0;
right: 0;
box-sizing: border-box;
padding: 10px;
display: block;
min-height: 100%;
}
footer {
background: black;
text-align: center;
color: white;
box-sizing: border-box;
padding: 10px;
}
.flex {
display: flex;
height: 100%;
}
.flex-col {
flex: 1 1;
background: #ccc;
margin: 0px 10px;
box-sizing: border-box;
padding: 20px;
}
.flex-btn-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
}
.btn {
box-sizing: border-box;
padding: 10px;
transition: .7s;
margin: 10px 10px;
min-width: 200px;
}
.btn:hover {
background: transparent;
cursor: pointer;
}
.dark {
background: black;
color: white;
border: 3px solid black;
}
.light {
background: white;
border: 3px solid white;
}
.light:hover {
color: white;
}
.dark:hover {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flex-btn-wrapper">
<button id="addBodyContent" class="dark btn">Add Content</button>
<button id="resetBodyContent" class="dark btn">Reset Content</button>
</div>
<div class="flex">
<div class="flex-col">
lorem ipsum dolor...
</div>
<div class="flex-col">
lorem ipsum dolor...
</div>
</div>
</div>
<footer>
<div class="flex-btn-wrapper">
<button id="addFooterContent" class="light btn">Add Content</button>
<button id="resetFooterContent" class="light btn">Reset Content</button>
</div>
lorem ipsum dolor...
</footer>
+1
source to share