Is there a way for the footer to be positioned at the bottom no matter how much content is on the page and the content does not overlap with the footer?
Thank You for all your help
Flexbox might be a solution which is pretty flexible. The footer will always be at the bottom of the page unless there is too much content, then it will just be at the end of the page (thus no "overlapping").
document.getElementById("expand").addEventListener("click", function() { document.getElementById("long").style.display = "block"; });
* {
box-sizing: border-box;
}
#container {
display: flex;
flex-direction: column;
align-content: stretch;
height: 100vh;
}
header, footer {
flex-basis: auto;
flex-grow: 0;
padding: 20px;
background: #ccc;
}
div#content {
flex-grow: 1;
padding: 20px;
}
div#long {
display: none;
}
<div id="container">
<header>This is the header with auto-height.</header>
<div id="content">Short Content. <span id="expand"><strong><u>Click here more content!</u></strong></span>
<div id="long"><img src="http://placehold.it/350x1000"></div></div>
<footer>This is the footer, and always at the bottom of the window unless there's too much content.</footer>
</div>
A better idea can be utilizing a css framework like twitter-bootstrap. but if you want to achieve that with css only, something like this in your css file will give you what you need:
footer {
width: 100%;
bottom: 0;
position: fixed;
}
In order to make sure, any content and footer will not overlap you can either set a padding-bottom in your body:
body {
padding-bottom: 60px;
}
or have a content div which you set its 'margin-bottom':
.content {
margin-bottom: 60px;
}
jsfiddle
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 1 year ago.
My HTML layout looks like this:
body //display: flex
nav //flex-basis: 85px
main //flex-grow: 1
footer //flex-basis: 50px
On desktop view, the footer is at the bottom: but if the content grows, later on, the footer is no more at the bottom, there is a gap between the bottom of the page and the end of the footer.
on mobile, you can immediately see the gap.
I'm using display: flex and looking for a way to make sure that the footer always stays at the bottom.
her'es the layout css:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
flex-basis: 85px;
}
.main {
flex-grow: 1;
}
footer {
flex-basis: 50px;
background-color: #10182f;
color: white;
padding: 15px 0;
}
Thanks in advance
here are some images to clarify:
Normal desktop view:
Longer viewport:
Normal mobile:
Try
position: absolute;
bottom: 0;
for the footer. However maybe you have margin that you are missing on somewhere
Better way is to not use flex. All you need to do is use calc.
Example:
https://codepen.io/seanstopnik/pen/1e41196f62be22d881a4fe61e25c82da
body {
margin: 0;
}
header {
height: 80px;
background: red;
}
main {
min-height: calc(100vh - (80px + 50px));
}
footer {
height: 50px;
background: blue;
}
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
I am using display: table property to achieve sticky footer with the following features:
Header and footer heights are not fixed
Content is always 100% of the remaining height
Here is a fiddle of what I currently have: JSFiddle
Everything works perfectly, but what I am trying to achieve is a footer that is not visible on the screen, unless the user scrolls. The footer should be right below the window if there is not enough content, otherwise the content should push it. Here is a picture that explains what I actually mean. In the left is what I currently have, in the right what I am trying to achieve.
You could use flexboxes, along with view height for that !
.container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
height: 100vh;
}
.header {
flex: 0 0 50px;
background: lightblue;
}
.content {
flex: 1 1 auto;
background: lightgrey;
}
.footer {
height: 100px;
background: darkcyan;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
</div>
<div class="footer"></div>
#trichetriche's answer is better than mine (I really need to get to grips with flexbox!), but I updated your fiddle with a little bit of jQuery. This could be distilled down more but you can see what's going on as it is.
All it does is get the header height and content height, and if they're smaller than the window height then it sets the content height accordingly.
Fiddle
$(document).ready(function() {
var h = $('#header').height();
var c = $('#content').height();
var w = $(window).height();
if((h + c) < w) {
$('#content').height(w - h);
}
});
I ended up using just the same code, but instead of having all elements in the container I left the footer outside. Seems to work just right. Here is an updated fiddle: JSFiddle
* {
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
}
.container{
width: inherit;
height: inherit;
display: table;
background: red;
}
.container div {
width: inherit;
}
.header {
background: darkgray;
}
.content {
height: 100%;
background: green;
}
.footer {
background: yellow;
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1><h1>CONTENT</h1><h1>CONTENT</h1>
</div>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
I'd like to know: is it possible to build a 3 rows layout, 100% height, with flexbox?
<header> The header content goes here. </header>
<div class="content"> The main content goes here. </div>
<footer> The footer content goes here. </footer>
fixed-height header and footer, while content the liquid part.
I mean, something like this but without absolute positioning:
* {
margin: 0;
}
header {
position: absolute;
width: 100%;
height: 64px;
top: 0;
background: red;
}
footer {
position: absolute;
width: 100%;
height: 64px;
bottom: 0;
background: green;
}
.content {
position: absolute;
width: 100%;
top: 64px;
bottom: 64px;
background: blue;
}
<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>
http://jsfiddle.net/BMxzn/
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1; /* this is the key; consumes all available height */
background: blue;
}
header {
height: 64px;
background: red;
}
footer {
height: 64px;
background: green;
}
* {
margin: 0;
}
<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>
I add my own accepted answer here, because it addresses other issues as well.
I noted that the usually suggested code has a problem with Android prior to 4.4.4. By better indagating > this and > this I found out that the problem is > this, even if Android is not mentioned on the affected browsers list. So, my solution was to add flex-shrink: 0 to the content:
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main-content{
flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too)
}
It's also good to assign some kind of flex property to header and footer. I noticed on Android 442 that otherwise the bg color was gone:
.main-header,
.main-footer{
flex: none; // or flex something.
}
Also please note that I'm using Autoprefixer. Otherwise, you should not use the shortcut on main-content (IE shit-fix):
.main-content{
flex-grow: 1;
flex-shrink:0;
flex-basis:auto;
}
Very similar to these question : this & this
You need only 3 lines of code:
display:flex;
flex-flow:column;
height:/* whatever height needed */
and then flex:1; to the container that needs to fill remaining space
* {
margin: 0;
}
body {
display: flex;
flex-flow: column;
height: 100vh;/* if you relay on flex, then vh is also understood */
}
body>* {
padding: 1em;
}
header {
background: red;
}
footer {
background: green;
}
.content {
flex: 1;
background: blue;
color: white;
/* optionnal if you want to keep footer at screen
overflow:auto; */
}
<header>The header <b>of any height</b> content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer <b>of any height</b> content goes here.</footer>
there is no need to set heights to footer or header , but you might add overflow:auto to the main container.
As an example, I've made a fiddle:
https://jsfiddle.net/L7mwpzux/3/
How do I make the div .container minimally fill the screen?
So when there is almost no content, it still fills the screen.
It's for a page that is shown when the checkout cart is empty. The content is too thin, so the screen is not fully filled with content.
P.s. I am not looking for an answer that assumes that the header or footer has a static height. I want to be able to use it also in situations where the height of the header or footer is variable.
Also, I would love a CSS solution, so no JavaScript or jQuery
You can use calc() and set 100vh - height of header, also add box-sizing: border-box to keep padding inside.
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
header {
height: 200px;
background-color: blue;
width: 100%;
}
.container {
padding: 50px;
min-height: calc(100vh - 200px);
}
footer {
width: 100%;
height: 200px;
background-color: #333;
}
<header>
</header>
<div class="container">
small text
</div>
<footer>
</footer>
Other approach is to use Flexbox and set display: flex on body which is parent element in this case with min-height: 100vh and then just set flex: 1 on .container so it takes rest of free height.
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background-color: blue;
}
.container {
padding: 50px;
flex: 1;
}
footer {
height: 100px;
background-color: #333;
}
<header>
</header>
<div class="container">
small text
</div>
<footer>
</footer>
try this
min-height: calc(100vh - 400px);
here is the fiddle https://jsfiddle.net/L7mwpzux/1/
I found several questions about but none of their solutions was working for me so here we go again.
Let's say I have this template of HTML
<html>
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</html>
The footer div should be at least 80px height, but if those 80px plus the height of all other 3 divs is not enough to fullfill the screen I want the footer to increase as much as the screen is filled with it below header, contentA and contentB.
BG-Color Solution
If you just want to let the remaining space have the same background-color as the footer (but not the body), you could add the footer bg-color to the html-tag:
html {
background-color: #footer_color;
}
body {
background-color: #body_color;
}
#footer {
min-height: 80px;
}
.
JS-Solution
If you have something more complex within your footer, you could use javascript/jquery to calculate the remaining space and set the footer to that height.
There is a similar question with a code example here: https://stackoverflow.com/a/14329340/3589841
.
Flexbox-Solution
If you only care about the latest browsers you can use the flexbox-box-model:
HTML:
<html>
<body>
<div id="flex_container">
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</div>
</body>
</html>
CSS:
html, body {
min-height: 100%;
}
#flex_container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#header {
flex: 0 1 auto;
}
#contentA {
flex: 0 1 auto;
}
#contentB {
flex: 0 1 auto;
}
#footer {
flex: 0 1 100%;
min-height: 80px;
}
I believe you're going for something like this, have a look http://jsfiddle.net/dusUK/
Using CSS, we create a class, which in this case is fullheight, and we apply the following:
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
}
We also then apply the following to html, body
html, body {
height: 100%;
min-height: 100%;
}