The sticky footer pattern ensures that the footer sticks to the bottom of the viewport unless the non-footer content is tall enough in which case it is pushed below the bottom of the viewport.
The following application of this pattern works for Chrome and Opera but not Firefox. Am I missing anything?
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Surprisingly, even though it works from Chrome (when I place the HTML in a file) it's not displayed properly in the Stack Overflow's HTML pen facility in full page mode — even though I'm still using Chrome. What is observed instead is that the footer rises from the bottom of the viewport. This is the exact same failure mode that is observed under Firefox.
You might want to look into the vh unit coupled with display: flex...
html,body {
margin: 0;
padding: 0;
}
.container {
min-height: 100vh; /* make the container at least the height of the viewport */
display: flex; /* use flexbox */
flex-direction: column; /* use a vertical flex layout */
}
.content {
flex-grow: 1; /* expand to fill remaining container height */
background-color: #e9e9e9;
}
.footer {
background-color: #ccc;
height: 100px;
}
<div class='container'>
<div class='content'>
<h1>Content</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus
ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</div>
<div class='footer'>Footer</div>
</div>
Set your html, body height to 100%
html, body
{
height:100%;
}
html, body
{
height:100%;
}
#container {
min-height: 100%;
position: relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px;
/* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0;
height: 100px;
background: brown;
}
<body>
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean
porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis
purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque
lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
</body>
Pointers: Sticky Footer - CSS Tricks
Based on this answer I ended up adding the following mozilla-specific fix:
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
95% is necessary as if 100% is specified, then the bottom of the footer gets cropped in Firefox (no idea why).
#-moz-document url-prefix() {
html {
height: 100%;
}
body {
height: 95%;
}
}
#container {
min-height:100%;
position:relative;
}
#non-footer {
padding-left: 1em;
padding-right: 1em;
padding-bottom: 150px; /* 100px + 50px (#footer::height + #footer::margin-top) */
}
#footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: 50px 0 0 0 ;
height: 100px;
background: brown;
}
<div id='container'>
<div id='non-footer'>
<h1>Sticky footer pattern</h1>
<p>
<a href='https://stackoverflow.com/q/46552641/274677'>SO question</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero ex, tempus quis dolor at, consectetur lobortis leo. Etiam faucibus velit non turpis euismod lacinia. Vestibulum lobortis neque sed mi vestibulum, sit amet venenatis nulla auctor. Aenean porttitor sed purus id ornare. Mauris sed fermentum sem, id dapibus dolor. Nullam ullamcorper ut sem in consectetur. Quisque accumsan mauris vitae mi faucibus, sed blandit libero scelerisque. Donec vitae luctus metus, non fermentum elit. Duis purus ante, tempor vestibulum facilisis id, iaculis sed eros. Maecenas condimentum tortor suscipit aliquam feugiat. Sed sed enim egestas, venenatis ex at, pharetra nibh. Nullam faucibus tincidunt erat in mollis. Nulla a nunc lacus. Proin in pellentesque lorem.
</p>
</div>
<div id='footer'>
</div>
</div>
This works in Firefox as well but not as a Stack Overflow HTML/CSS snippet (when in full screen mode).
Related
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
When I try to use justify-content: space-between, it won't work, and I'm assuming that it may be because I don't have space left for this to work. What can I do instead of this?
This is what happens:
However I want it to look like this:
HTML:
<div class = "container">
<main role = "main">
<div class = "group">
<img src = "izonebg.jpg" alt = "group" class = "groupbg">
</div>
<div class = "content-wrapper content-flex">
<div class = "about">
<p id = "aboutiz">ABOUT</p>
</div>
<div class = "info">
<p id = "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>
CSS:
body{
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container{
width: 100%;
}
.groupbg{
width: 100%;
top: 0;
left: 0;
}
#aboutiz{
font-family: Kiona;
font-size: 4em;
font-weight: 500;
}
.content-wrapper{
width: 85%;
margin: 0 auto;
}
.content-flex{
display: flex;
justify-content: space-between;
}
#about-content{
font-family: Acid;
font-size: 1.75em;
}
<div class="section-wrap"> <!-- flex container -->
<div class="heading"><!-- flex item -->
<span class="head">about</span></div>
<div class="description-wrapper"><!-- flex item -->
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
.section-wrap {
display: flex;
justify-content: space-between;
width: 550px;/* try to reduce a flex width container,
see what happens, flex container need some space sometimes */
}
.heading {
width: 100px;
background: orange;
}
.description-wrapper {
background: black;
color: white;
}
.content {
width: 400px;
}
There was extra margins applying to the About and the content. Hence the difference. Please check the below example where I have removed extra margins.
.container{
width: 100%;
}
.groupbg{
width: 100%;
top: 0;
left: 0;
}
#aboutiz{
font-family: Kiona;
font-size: 4em;
font-weight: 500;
margin: 0;
padding-right: 10px;
}
.content-wrapper{
width: 85%;
margin: 0 auto;
}
.content-flex{
display: flex;
justify-content: space-between;
}
#about-content{
font-family: Acid;
font-size: 1.75em;
margin: 0;
}
<div class = "container">
<main role = "main">
<div class = "group">
<img src = "izonebg.jpg" alt = "group" class = "groupbg">
</div>
<div class = "content-wrapper content-flex">
<div class = "about">
<p id = "aboutiz">ABOUT</p>
</div>
<div class = "info">
<p id = "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit, eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>
Using CSS grid would be better to use and set gutters for the desired gaps.
The main structure of the page should be consistent between pages, flexbox could cause gaps and widths to change page to page based on its content and CSS grid can help with that.
Try to only use Flexbox for smaller elements like a collection of buttons or pills together and CSS grid for Structure.
justify-content: space-between; is nt working because, there is no space between about and content. Make them display: flex and set flex-grow to 1 and adds a flex-basis: 0. These two properties makes the div to grow from a minimum value of 0%. Ths will make both of the element to consume 50% of container width. And make the UI look like the requirement.
body {
margin: 0;
font-size: 1.125rem;
font-weight: 400;
}
.container {
width: 100%;
}
.groupbg {
width: 100%;
top: 0;
left: 0;
}
.about, .info {
display: flex;
flex: 1;
}
#aboutiz {
font-family: Kiona;
font-size: 4em;
font-weight: 500;
}
.content-wrapper {
width: 85%;
margin: 0 auto;
}
.content-flex {
display: flex;
justify-content: space-between;
}
#about-content {
font-family: Acid;
font-size: 1.75em;
}
<div class="container">
<main role="main">
<div class="group">
<img src="izonebg.jpg" alt="group" class="groupbg">
</div>
<div class="content-wrapper content-flex">
<div class="about">
<p id="aboutiz">ABOUT</p>
</div>
<div class="info">
<p id="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida metus fermentum
pulvinar eleifend. Aenean condimentum, sapien dapibus interdum porttitor, arcu eros congue enim, sed
fermentum erat urna non mi. Duis sed volutpat ex. Vestibulum sit amet fringilla purus. Vivamus ut ipsum sed
diam finibus sollicitudin ac lacinia velit. Pellentesque ultrices odio non ante suscipit, nec ullamcorper
nulla interdum. Morbi facilisis cursus pharetra. Fusce finibus interdum ligula. Aenean ac sodales velit,
eget ullamcorper ante. Duis metus elit, elementum in sollicitudin non, fringilla eu enim. Quisque pharetra
orci in odio efficitur, sit amet lacinia quam imperdiet. In tempor pellentesque eros vel semper. Nam neque
nibh, posuere eu euismod a, elementum vitae dolor.</p>
</div>
</div>
</main>
</div>
I'm trying to float:right; image next to paragraph <p>, which are nested together in <div> container. The problem is that the parent <div> resize its height with the size of the text in the paragraph, that's good, but floated right image overflows the div, and same <div> didn't resize itself according to the image height.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*
overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container
*/
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<!--
<main>
<section>
-->
<img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I tried to use overflow: hidden; , but that works only for a single "post". When I try to put a second one, the same problem appears and length of the images that flows out of the 'content container' doubles.
I'm newbie in HTML/CSS and the code I write it's for my own knowledge. So I'll be grateful if we figure out something.
Greetings from Varna, Bulgaria!
Make the div to clear it's children using :after pseudo class.
.container{
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
border:1px solid red;
}
.content{
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
/*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}
.autoportrait{
width: 20%;
height: 20%;
/*max-width:205px;
max-height:265px;
margin-bottom: 25px;*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear:both;
}
.container:after {
visibility: hidden;
display:table;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class="content">
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
</p>
<!--</section>
</main>-->
</div>
<div class="container">
<!--<main>
<section>-->
<img class="autoportrait" src="http://images.financialexpress.com/2015/12/Lead-image.jpg" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla.
Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt.
Phasellus vel magna ut massa tempus ultricies. Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem.
Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra.
Nulla venenatis, nulla sit amet suscipit vulputate, sem mauris rutrum erat, id pharetra dui nunc at dui.
Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat.
Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante, nec consectetur elit leo a ligula.
Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--</section>
</main>-->
</div>
</div>
Simplest solution is to use overflow: hidden; on .content .container.
I know you said you attempted it previously and even had it commented out in .content .container but it's working for me. Perhaps the issue was where/how you placed the second article in your markup.
.container {
width: 70%;
background-color: #777;
margin: 0 auto;
padding: 25px;
}
.content {
width: 100%;
height: auto;
float: left;
}
.content .container {
width: 70%;
height: auto;
background-color: white;
overflow: hidden;
border: 1px solid #ccc;
}
.autoportrait {
width: 20%;
height: 20%;
/*
max-width:205px;
max-height:265px;
margin-bottom: 25px;
*/
padding: 10px 10px 10px 10px;
border: solid;
border-width: 2px;
float: right;
clear: both;
}
<div class="content">
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
</div>
<div class="container">
<img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
<h2>Post title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
</p>
<!--
</section>
</main>
-->
</div>
</div>
I am trying to move my footer to the bottom and in the cases if the content is not long enough, then push it to the bottom of the screen. I read that it can be achieved solely by using css, however I couldn't achieve it.
I tried creating columns,
<body>
<div id="wrapper">
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div id="content">
...
</div>
<div id="footer">
...
</div>
</div>
</body>
Then, in my css, I tried using:
#footer {
height: 30px;
width:100%;
background-color: #2D2D2D;
position: absolute;
left: 0;
bottom: 0;
}
#wrapper {
background-color: purple;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
}
but no luck :/
Here I created it in bootply. Here, I added bunch of <br> tags to lengthen the content and added some text underneath. What I want is instead if content is short, stick the footer to the bottom of the page (not where content ends in the middle of the screen); and if content is long, where the content ends just below content.
What am I doing wrong/missing out?
Well, if you want it to always stay at the bottom, you can use this code. Remove the <p> tags and run again to test without text
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
position: relative;
padding-bottom: 5em;
box-sizing: border-box;
}
#content {
background: red;
}
footer {
height: 4em;
background: blue;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<body>
<div id="wrapper">
<div id="content">
<p> Lorem ipsum dolor sit amet, adipiscing odio, vitae nulla luctus consectetuer, cras odio turpis adipiscing lobortis, tempor luctus morbi. Sed vitae id in, vel tempor mattis rutrum, eu non mauris in erat lectus enim, eget morbi quo imperdiet, mi lorem aliquam sed accumsan orci. Rhoncus nonummy turpis ipsum tempus tempor elementum, vestibulum sint tempor, accumsan mauris scelerisque rutrum. Eget rhoncus hendrerit, ipsum ipsum nunc sit ut arcu aenean, urna in justo reprehenderit mollis, suscipit erat, consequat suspendisse turpis duis nec pellentesque tristique. Lectus velit, vestibulum lorem enim turpis a eu mauris, mauris bibendum sociis lobortis sodales sed, eget rhoncus quisque consequat curabitur sit. Sodales velit et convallis interdum quis rutrum, dolor lobortis neque mi eget lorem, sed tincidunt dis convallis. Feugiat in conubia nec ipsum, nec rutrum nisl, vitae id vestibulum sollicitudin fringilla ac ligula, eget rutrum in. Tortor mollis amet, nulla pharetra nec in, vel vulputate nec eu diam, cras massa adipiscing pulvinar, id pulvinar massa dignissim. Quisque lorem enim vel orci vestibulum, consectetuer tincidunt et egestas.</p>
<p>
Donec nunc nec in, ut non lorem eget tortor facilisi sed, eget tempor a duis urna, pellentesque proin blandit et, mollis dictum dictum. Aliquet massa praesent vitae lorem at posuere, id lobortis nec id dignissim lorem nisi, at amet occaecati, duis enim quisque quam est, ultrices nunc semper vivamus praesent aenean nam. Natoque neque adipiscing, ipsum magna libero. Pellentesque mattis, fusce maecenas sit vel, accumsan eleifend et justo cras dui, wisi quisque interdum amet arcu bibendum, ante eget non mattis non. Iaculis congue cras feugiat. Platea aliquet suspendisse, orci nulla aliquam adipiscing in. Nullam libero velit in pellentesque diam est, urna phasellus, pellentesque porta eu. Ante lacus duis amet libero odio, accumsan neque tincidunt imperdiet, wisi praesent diam arcu et, erat aliquam feugiat ultricies tortor ullamcorper. Vestibulum sapien velit, ante fusce cursus volutpat tellus, eros officiis, ridiculus cum eu suscipit, felis dui sed nulla hac neque fermentum. Vivamus sagittis, malesuada nullam, dolor sit sed sollicitudin et maecenas fermentum, non nunc dapibus purus. Aliquam rhoncus aliquam sit fermentum, curabitur nulla accumsan.</p>
<p>
Nec consequat. Purus neque inceptos suscipit dictum, dolor massa ut egestas proin sed ultrices, eleifend at sed sit mi adipiscing sociis. Nostra laoreet metus nulla in. Urna eget, accumsan id mattis morbi, etiam a consequat curabitur, in felis vel. Aliquam feugiat sed, sit ligula sit praesent lobortis orci metus, nulla cursus mi velit vitae, a erat elit, velit ultrices consectetur libero perferendis libero. Risus sed, suspendisse urna in eget voluptas tristique, aliquam justo lectus, rutrum scelerisque, sem nibh qui dictum aliquet lacinia ut. Urna sagittis ac tristique gravida risus aliquam, dictum ipsum ac sodales, felis mauris repellendus porttitor aenean, orci vel feugiat nunc hendrerit. Porta eu, etiam pellentesque mauris et aliquam consectetuer donec, molestie dui magna enim, ac eu erat ut, lectus ligula feugiat urna per. Ornare aliquet ligula, ultricies sint arcu ipsum nulla. Vel ut vitae dui adipiscing.</p>
</div>
<footer>This is a footer</footer>
</div>
</body>
The trick is to use position: relative on the footer's container element and position: absolute on the footer to actually push it to the end of the container. Position: fixed isn't necessary.
https://codepen.io/cbracco/pen/zekgx
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
This example does the same thing with a container element over the entire page, instead of operating on the html and body tags.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This sends the footer to bottom of the bage no matter how much text you have:
.footer { background-color: #2D2D2D;
position:absolute;
bottom:0px;
width: 100%;
margin: 0;
background-color: #000;
height: 30px;/* or however high you would like */ }
html, body {
height: 100%; }
.wrapper { background-color: purple;
position: absolute;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
.footer, .push {
30px; }
.navbar {
background-color: red }
Ok, sorry for the misunderstanding, now it's fixed: http://www.bootply.com/N3XiwwGr9q#
I need to fix the following code so that child elements were 100% height of its parent. Chromium and Firefox debugging tools show that parent element (footer) has non-zero height. So children should have the same height.
HTML
<div class="footer">
<footer class="clearfix">
<section class="path">
<img height="474px" src="../../src/images/api-maps.yandex.ru.png">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
<footer class="clearfix"></footer>
</footer>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.clearfix {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
div.footer {
width: 100%;
}
div.footer footer {
background-color: black;
width: 100%;
overflow: hidden;
}
footer.clearfix {
border-top: 6px solid grey;
}
footer section {
float: left;
width: 33.333%;
height: 100%;
}
section.path {
background-color: red;
}
section.path img {
width: 100%;
display: block;
}
section.info {
background-color: blue;
}
section.links {
background-color: yellow;
}
I can't figure out why it doesn't work.
The footer has no height of its own, just what is implied by the image in the content so height:100% won't work.
As mentioned in the comments by raplh.m
the height on the container would have to be explicit. A better approach is to use flexbox, or display: table, which is better supported. That is, display: table on the container and display: table-cell on the sections within.
In fact you can use both and if the browser supports flexbox it will use that in preference to display:table.
As a bonus...you don't need to clear any floats because there aren't any.
footer {
display: table;
table-layout: fixed;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
section {
display: table-cell;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
img {
display: block;
margin: auto;
}
.path {
background: red;
}
.info {
background: yellow;
}
.links {
background: blue;
}
<footer>
<section class="path">
<img height="474px" src="http://lorempixel.com/output/city-h-c-200-474-10.jpg">
</section>
<section class="info">
<p>bla</p>
</section>
<section class="links">
<p>bla</p>
</section>
</footer>
Codepen Demo
Since you are using percentage heights, you need to specify the height of parent elements.
Try this:
html, body { height: 100%; }
.footer { height: 100%; }
footer { height: 100%; }
DEMO: http://jsfiddle.net/1krrxb87/
For a clear understanding of how the height property works with percentage values, see my answers here:
Why is the 'height' property with percentage value not working on my div?
Percentage height not working in nested flexbox layout in Chrome
This is also possible without use off flexbox or display:table
When you need footer to be atleast have an cross browser height off 100% off the parent you need these CSS rules
footer {
min-height: 100%;
height: auto !important;
height: 100%;
}
To have three floated sections that will have 100% height and appear equal height you can use this HTML and CSS code.
HTML
<footer>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet nunc eget massa congue scelerisque ac at ex. Ut odio nibh, interdum ac tempus vel, tempus vitae elit. Phasellus vel massa luctus, condimentum leo id, malesuada lectus. Aenean elit risus, consequat et dolor porta, mattis porta sem. Donec id commodo magna, sit amet mollis augue. Vestibulum id imperdiet massa. Maecenas accumsan pharetra est, quis imperdiet diam molestie eu. Aenean lobortis condimentum pharetra. Integer eget sem dictum, tempor arcu non, tincidunt purus. Sed nisi arcu, eleifend non maximus quis, porttitor id sem. Aliquam erat volutpat. Vivamus maximus tempus velit sit amet blandit. Quisque eleifend arcu at nisi elementum efficitur. Praesent consectetur nibh eget accumsan convallis. In pharetra nibh lorem, ac venenatis ipsum tincidunt venenatis. Donec eros justo, ultrices sit amet quam condimentum, placerat sollicitudin justo.
</p>
</section>
<div style="clear:both;"></div>
</footer>
CSS
html, body {
height: 100%;
background-color: green;
}
footer {
background-color: yellow;
min-height: 100%;
height: auto !important;
height: 100%;
overflow: hidden;
}
footer section {
float: left;
width: 33.33%;
background-color: red;
padding-bottom: 999999em;
margin-bottom: -999999em;
}
see demo http://jsfiddle.net/gfoff12w/3/
Note the CSS rules padding-bottom: 999999em and margin-bottom: -999999em these CSS rules will force the browser to create an "height" on the floated section elements.