Split screen horizontally in 2 div

Question

I want to set a div in html and set a second div with the remaining space..I guess this is simple, but I'm having a difficult to do that.

I want to set a div with a fixed height and make the second with the remaining space, something like that:

<div class="div1">1st</div>
<div class="div2">2nd</div>

CSS:

div.div1{background: #999; height: 78px;}
div.div2{ background: #666; height: (remaining_space); }

It's possible?

Check out http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 — Barbara Laird, Jul 23 '13 at 23:49

score 1 · Answer 1 · answered Jul 23 '13 at 23:51

There is no cross browser way to do this with only CSS at the moment. To get this to work on all browsers, you will need to use JavaScript. If you want to be on the bleeding edge and support only the latest browsers, you can look into IE10's grid layout.

score 1 · Accepted Answer · answered Jul 24 '13 at 00:00

As the other SO users said, there is no cross browser way to do this only with CSS. Although I have noticed that you didn't tag your question with javascript I will suggest a solution for you using jQuery

$(document).ready(function() {
    var docHeight = $(document).height();
    var div1Height = $('.div1').height();
    var div2Height = docHeight - div1Height;
    $('.div2').css('height', div2Height);
});

http://jsfiddle.net/FakeHeal/TjPQ6/

score 0 · Answer 3 · answered Jul 30 '18 at 11:11

What about using position: absolute, then setting the height of the top div to, say 100px, and the top of the bottom div to that same value:

HTML:

<div class="div1">1st</div> 
<div class="div2">2nd</div>

CSS:

div.div1, div.div2 {
  position: absolute;
  left: 0;
  right: 0;
  outline: solid 1px #ccc; /* just for making the divs visible */
  margin: 5px; /* just for making the divs visible */
}
div.div1 {
  height: 100px;
  top: 0;
}
div.div2 {
  top: 100px;
  bottom: 0;
}

No JavaScript at all needed for this solution!

Demo here.

Split screen horizontally in 2 div

3 Answers3