extending div to fit screen

Question

I have a function which pushes my footer to the bottom of the page. It works by adding a margin to the top of the footer, however, i want to add a bg color to my content and with the margin this just leaves a big whitespace in the middle.

Can I extend the div above instead of adding the margin to the footer so that my bg color covers the page with no whitespace.

if ($('#footer').length) {
  var doc_height = $(window).height();
  var footer_top = $('#footer').position().top + $('#footer').height();
  
  if (footer_top < doc_height) {
    $('#footer').css('margin-top', (doc_height - footer_top) + 'px');
  }
}

#main_content {
  background-color: #f00
}

#footer {
  background-color: #0f0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_content">Some text</div>
<div id="footer">Some text</div>

Does this answer your question? [Align an element to bottom with flexbox](https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) — 0stone0, Aug 17 '20 at 15:47

Asutosh · Answer 1 · 2020-08-17T16:02:49.063

0

Can you please try flex as shown below:

#main_content{background-color:#f00}
#footer{background-color:#0f0}
body{
display:flex;
flex-direction:column;
height:100vh;
}
#main_content{
flex-basis:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_content">Some text</div>
<div id="footer">Some text</div>

edited Aug 17 '20 at 16:02

answered Aug 17 '20 at 15:49

Asutosh

1,775
2
15
22

1

Why the `doc_height` var? – 0stone0 Aug 17 '20 at 15:52
Yeah not needed. – Asutosh Aug 17 '20 at 16:03

Ramin Bateni · Answer 2 · 2020-08-17T21:14:20.670

You can do it without JavaScript. See the demo of my answer.

By using this code

You don't see an useless scroll bar beside the page when your content is little.
div elements are fitted to the page.
The main_content and footer will be stretched when their content is large.

Demo

body{
  margin:0;
  height:100vh;
}
#main_content{
  min-height:90%;
  background-color:#f00;
 }
#footer{
  min-height:10%;
  background-color:#0f0;
}

<div id="main_content">Some text</div>
<div id="footer">Some text</div>

extending div to fit screen

2 Answers2