Div To Fill The Rest Of Page

July 26, 2023 Post a Comment

I'm trying to fill the rest of my content, before my footer. I've found many pages here with solutions that seem logical but don't seem to work within my page. I cant change my pos

Solution 1:

A way to do this, which I think would work for your layout, is using flexbox. I actually did this for one of my own projects (example). This is the best solution, since your footer and other content can have dynamic height.

General HTML structure:

<body>
  <main>
    Header and page content go here...
  </main>
  <footer>
    Footer...
  </footer>
</body>

It's important to include many different prefixes and fallbacks to make it work in all browsers (I tested it in multiple versions of Chrome, FF, IE and Safari).

CSS:

body {
  display: box;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

main {
  -webkit-box-flex: 11 auto;
  -moz-box-flex: 11 auto;
  -webkit-flex: 11 auto;
  -ms-flex: 11 auto;
  flex: 11 auto;
}

footer {
  margin-top: 32px; // Whatever space you want between content and footer.
  -webkit-box-flex: 01 auto;
  -moz-box-flex: 01 auto;
  -webkit-flex: 01 auto;
  -ms-flex: 01 auto;
  flex: 01 auto;
}

If you want to control the size of your .bottomfix div, you can add more flexboxes into the main element.

Solution 2:

Add to your #footer class position: fixed; then add position bottom: 0px; and it will be at the bottom

#footer {
    border-width: 5px;
    bottom: 0;
    padding: 6px07px;
    position: fixed;
    width: 100%;
}

if you want footer to bi fixed to the bottom of the page only if your page doesn't have enough content to fill in page then add this script before <body> closing tag

<scripttype="text/javascript">if(jQuery('header:first').height()+
   jQuery('main:first').height()+ jQuery('footer:first').height() >  jQuery(window).height()){ 
   $('#footer').css({position: 'fixed', bottom: '0px'});
}
</script>

and this scrip will on load check if your page needs fixed footer :)

or you can add it in

$(document).ready(function(){

  //code

});

Solution 3:

#footer {
  border-top: 1px solid #000;
  background: #222;
  color: #7B7B7B;
  font-size: 13px;
  position: absolute;
  z-index: 100;
  clear: both;
  padding: 10px0;
  bottom: 0;
}

This worked for me I set the position to absolute and set bottom:0; to force the div to the bottom of the browser

Solution 4:

You can try using the the CSS3 calc function. Like this:

main{
    min-height: 100%; /*fallback if browser doesn't support calc*/min-height: ~"calc(100% - 330px)"; /*330px comes from 270px <header> plus 60px <footer>*/
}

You would just have to replace the <header> and <footer> height value calculation to yours.

Also make sure you have something like this:

html, body{
    height:100%;
}

Solution 5:

Just try this. 66px is footer + header height

html, body, #page, #bottomfix, main > div {
    height: 100%;
}

main {
    height: calc(100% - 66px);
}

example

Html5 Lite