How do I keep my footer div from overlapping with my page content?

Question

I used this code to print a table using JSTL. The table was in the contentFrame div. However, the footer which was initially at the bottom started to float and overlap with the contentFrame. I don't want to keep the footer in a fixed position though. Is there a way to keep it at the bottom of the page such that when new content is added it is "pushed" down?

 body { background-color: blue; } #contentFrame {} #date { float: left; } #logOutFrame, #contentFrame, #headerFrame, #menuFrame { background-color: red; } #headerFrame { margin-top: 30px; } #logOutFrame { left: 0px; position: absolute; text-align: right; top: 0px; width: 100%; } #footerFrame { background-color: orange; bottom: 0px; left: 0px; position: absolute; text-align: center; width: 100%; } 

 <div id="logoutFrame"> <span id="date"> Date </span> <span id="userEmail"> blah@email.com </span> <a id="signOutLink" href="#"> Sign Out </a> </div> <div id="headerFrame"> <h1>Pointwest Logo</h1> </div> <div id="menuFrame"> <ul> <li>A</li> <li>B</li> </ul> </div> <div id="contentFrame"> // content </div> <div id="footerFrame"> <p>footer</p> </div> 

EDIT: used the sticky footer from bootstrap and it worked

Answer 1

One way to solve this is:

1. Give the #footerFrame a default position: absolute
2. Use .js to monitor the height of the browser viewport and the height of the #contentframe
3. If #contentframe height exceeds the remaining viewport height, change #footerFrame to position: relative

 function positionFooter() { var contentFrame = document.getElementById('contentFrame'); var footerFrame = document.getElementById('footerFrame'); var contentY = contentFrame.offsetTop; var contentHeight = contentFrame.clientHeight; var viewportHeight = window.innerHeight; var footerHeight = footerFrame.clientHeight; if ((contentY + contentHeight) > (viewportHeight - footerHeight)) { footerFrame.style.position = 'relative'; } else { footerFrame.style.position = 'absolute'; } } window.addEventListener('load',positionFooter,false); window.addEventListener('resize',positionFooter,false); 

 body { background-color: blue; } #contentFrame { height: 300px; } #date { float: left; } #logOutFrame, #contentFrame, #headerFrame, #menuFrame { background-color: red; } #headerFrame { margin-top: 30px; } #logOutFrame { left: 0px; position: absolute; text-align: right; top: 0px; width: 100%; } #footerFrame { display: block; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50px; background-color: orange; text-align: center; } body, #contentFrame, #footerFrame, #footerFrame p { margin: 0; padding: 0; } 

 <div id="logoutFrame"> <span id="date"> Date </span> <span id="userEmail"> blah@pointwestcom.ph </span> <a id="signOutLink" href="#"> Sign Out </a> </div> <div id="headerFrame"> <h1>Pointwest Logo</h1> </div> <div id="menuFrame"> <ul> <li>A</li> <li>B</li> </ul> </div> <div id="contentFrame"> // content </div> <div id="footerFrame"> <p>footer</p> </div> 

Answer 2

You should use <div style="clear:both;"></div> to clear float before footer this way:

<div style="clear:both;"></div>
<div id="footerFrame">
  <p>footer</p>
</div>

but no need to make position of footerFrame absolute :

#footerFrame {
  background-color: orange;
  text-align: center;
  width: 100%;
}

and TO LEARN MORE ABOUT FLOATS check this out: https://css-tricks.com/all-about-floats/

Answer 3

How big is your content?

If you remove the 'position: absolute;' or 'bottom: 0px;' from the #footerFrame css, the footer will move up to position itself under the page content.

If your content isn't big enough to fill the window, this may not be desired.

There is a number of footer solutions already on SO if you search for them that will show you the many ways you can achieve a footer solution that will work for you.

Answer 4

EDIT NOTE: this answers a different question, as I thought the header/footer needed to be in a fixed position. Left here for usefulness based on question title, but otherwise incorrect.

If you're able to accurately declare the height of your header and footer, this is exactly what position:fixed was made for.

NOTE: I only used [attribute] selectors for speed of creating the demo! Use classes instead in your actual production code- it's what classes are for, and doesn't run the risk of getting blasted by some shiny new feature at some point in the future!

http://dabblet.com/gist/a633128f55dbcc160ecc

 [head]{ position:fixed; width:100%; top:0px; height:20px; background-color:#ccc; } [foot]{ width:100%; position:fixed; bottom:0px; height:20px; background-color:#ccc; } [cont]{ /*set the top margin to the height of the header, plus a bit of buffer*/ /*set the bottom margin to the height of the header, plus a bit of buffer*/ margin:25px 0 25px; } 

 <div head> This is a header </div> <div foot> This is a footer </div> <div cont> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p> <p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p> <p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p> <p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p> <p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p> </div> 

If you're unable to declare the heights, well... you can fake it by including an exact copy of your header and footer without the position:fixed; but with visibility:none; above and below your content (respectively). Note that depending on how you do this, why the size is non-declarable, and what your header/footer contains, this may or may not be viable.

A less hacky way would be to add the margins with js based on the display size of your header/footer. I would actually suggest doing this instead, so long as the target browsers can support it.

If you want the footer to only marry the bottom if the content goes past it, you'll have to use js to detect the window size and default the footer/header to relative . If the window overflows, switch to fixed .