CODEWITHSUNDEEP
htmlcss
thur
thur

Reputation: 1074

Split screen horizontally in 2 div

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?

Upvotes: 1

Views: 7973

Answers (3)

sgrubsmyon
sgrubsmyon

Reputation: 1229

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.

Upvotes: 1

Ivanka Todorova
Ivanka Todorova

Reputation: 10219

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/

Upvotes: 1

Jeff
Jeff

Reputation: 14279

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.

Upvotes: 1

Related Questions