How do I make a sticky footer in Bootstrap 3?
Here is the current situation in my thread:
Fiddle . I don't need a footer fixed
and I don't need a sticky footer with position absolute
, I just want to fill a terrible section with a footer, I think that display:table-row
would do the trick, but don Don't know how to use it. Can anyone help me?
source to share
Here's a simple CSS table
+ structure table-row
.
html, body {
height: 100%;
}
body {
display: table;
width: 100%;
margin: 0;
}
header, main, footer {
display: table-row;
}
header {background: pink;}
footer {background: lightgreen;}
<header>header</header>
<main>main</main>
<footer>footer</footer>
And set height:100%
to one of the sections if you want the maximum height.
html, body {
height: 100%;
}
body {
display: table;
width: 100%;
margin: 0;
}
header, main, footer {
display: table-row;
}
main {
height: 100%;
}
header {background: pink;}
footer {background: lightgreen;}
<header>header</header>
<main>main</main>
<footer>footer</footer>
source to share
The easiest solution I can think of is to create a content container and assign a background color to it, then set the color to body
be the same as the footer, for example:
body {
background:#0F0;
}
#header {
background:#F00;
}
#container {
background:#FFF;
}
#footer {
background:#0F0;
}
source to share
just add
position:absolute;
bottom:0px;
to.footer
and
position: relative;
padding-bottom: (n)px;
to the body
change (n) to footer height
body {
position: relative;
margin:0;
padding-bottom: 100px;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
height:100px;
width:100%;
background-color: #efefef;
text-align: center;
}
<html><body><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="footer">text</div>
</body></html>
source to share