HTML height 100 % causes page overflow

Question

I am trying to make an html page with 2 divs : "top" and "main"

The top <div> must take the place of its contained elements, the main <div> must take all the remaining place.

Here is what I tried:

CSS CODE :

html,body{
  height:100%;
}

#top{
  background-color : red;
  padding:10px;
  border:1px solid;
}

#main{
  background-color : blue;
  height:100%;
  padding:10px;
  border:1px solid;
}

#content1{
  background-color:yellow;
}

#content2{
  background-color:yellow;
  height :100%;
}

HTML CODE:

<!DOCTYPE html>
<html>
  <head></head>
  <body>

    <div id="top">
      <div id="content1">content1</div>
    </div>

    <div id="main">
      <div id="content2">content2</div>
    </div>

  </body>

</html>

Here is the jsFiddle

As you can see, the "100%" I set on "content2" causes this div to take 100% of the page height instead of just the remaining space. Is there a magic css property to fix this?

EDIT:

Thank you for all your solutions.

I finally chose the solution proposed by Riccardo Pasianotto based on CSS properties display:table and display:table-row.

Here is my final HTML CODE:

<!DOCTYPE html>
<body>
  <div id="content1" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
         content1
      </div>
    </div>
  </div>
  <div id="content2" class="row">
    <div class="subcontent">
      <div class="subContentContainer">
        content2
      </div>
    </div>
  </div>    
</body>

Here is the corresponding CSS CODE:

html,body{
  padding:0;
  margin:0;
  height:100%;
  width:100%;
}

body{
  display:table;
}

.row{
  display:table-row;
  width:100%;
}

#top{
  height:100px;
}

#content1{
  background:#aa5555;
  padding:10px;
}

#content2{
  background:#5555AA;
  height:100%;
}

.subcontent{
  padding : 10px;
  height:100%;
}

.subContentContainer{
  background-color:yellow;
  height:100%;
}

And here is the corresponding Jsfiddle.

Why would you like to have your main content stick to the bottom ? Maybe you would like to have a footer at the bottom of the page ? — Brewal, Jun 25 '13 at 08:26
Later, I will put a border around the yellow zones. Then, If the height of the main content is bigger as the zone, I will put scroll bars. For the user, I think that it's cleaner if the size of this zone never changes. — Arnaud Denoyelle, Jun 25 '13 at 08:32
@w4rumy for the sake of simplicity, I did not put it in this example. Is this important in this particular case? — Arnaud Denoyelle, Jun 25 '13 at 08:33
Doctypes are allways important. but in jsfiddle is isn't needed. — Kees Sonnema, Jun 25 '13 at 08:33
I thought jsfiddle automatically generates the html tag.Adenoyelle,do you want something exactly like content1? — alvinarul, Jun 25 '13 at 08:33
jsfiddle is indeed implementing the and doctype attributes automatically. — Kees Sonnema, Jun 25 '13 at 08:35
"content1" is just a placeholder. Later, there will be another content which height can change over time. That's why it would be hard to hardcode the height. — Arnaud Denoyelle, Jun 25 '13 at 08:35
You could do this using a bit of jquery. Using your viewport. `$(document).ready(function(){ resizeDiv(); }); window.onresize = function(event) { resizeDiv(); } function resizeDiv() { vpw = $(window).width(); vph = $(window).height(); $('#somediv').css({'height': vph + 'px'}); }` — Kees Sonnema, Jun 25 '13 at 08:36
@adenoyelle Missing DOCTYPE means your browser goes into Quirks mode and renders elements differently. Therefore, if anything is not working and the example is missing a DOCTYPE, we are working based on a non-standard HTML document. So I always suggest adding a DOCTYPE first - experience has shown that a lot of bugs disappear then. — Uooo, Jun 25 '13 at 08:37
@w4rumy This does not solve the problem but effectively makes a difference. With ` `, the height of `` and `` are not `100% anymore`. I added the doctype and specified explicitly those heights. Thanks. — Arnaud Denoyelle, Jun 25 '13 at 08:44

score 2 · Accepted Answer · edited Mar 31 '15 at 00:01

2

DEMOJF

For doing this you have to use display:table so edit in that way

html,
body {
  height: 100%;
  width: 100%;
}
body {
  display: table;
}
.row {
  display: table-row;
  width: 100%;
  background: red;
}
#top {
  height: 100px;
}
#content1 {
  background: yellow;
  height: 100%;
}
#content2 {
  overflow: scroll;
  height: 100%;
  border: 1px solid black;
}

<body>

  <div id="top" class="row">
    <div id="content1">content1</div>
  </div>

  <div id="main" class="row">
    <div id="content2">content2</div>
  </div>

</body>

edited Mar 31 '15 at 00:01

Ruslan López

4,433
2
26
37

answered Jun 25 '13 at 09:00

rpasianotto

1,383
1
9
22

Starting from your example, I could adapt it to do exactly what I wanted: http://jsfiddle.net/b2X4r/ – Arnaud Denoyelle Jun 25 '13 at 09:19

Brewal · Answer 2 · 2013-10-25T09:43:46.060

1

What I often do is making a container without padding to min-height: 100% and let my content have its proper height (auto) :

This will make something like this :

#container {
    background-color : #5555AA;
    min-height: 100%;
}
#content2 {
    background-color:yellow;
    margin: 10px;
}

http://jsfiddle.net/5cEdq/25/

I don't know if this is exactly what you want, but you can't make a div just "fill the remaning space" without making it absolute. What you don't really want either.

edited Oct 25 '13 at 09:43

answered Jun 25 '13 at 08:48

Brewal

8,067
2
24
37

There aren't any better ways of doing this I guess. so this could be the best solution. – Kees Sonnema Jun 25 '13 at 08:49

score 0 · Answer 3 · answered Jun 25 '13 at 08:35

0

try this:

http://jsfiddle.net/5cEdq/16/

CSS :

   html,body{
      height:100%;
      Padding:0; 
      margin:0;
      border:0;}

answered Jun 25 '13 at 08:35

Falguni Panchal

8,873
3
27
33

The rendering is not correct with both browsers I tried (Chrome and FF on Linux). Is this correct with your browser? – Arnaud Denoyelle Jun 25 '13 at 08:37
@MrLister: Sorry. I am wrong. I tired setting height for body (I wanted to create an application with footer). But now I see this link: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height – Yogee Jun 26 '13 at 10:27

score 0 · Answer 4 · edited Mar 30 '15 at 23:43

Is there a magic css property to fix this?

Yes there is. It's called box-sizing

Read this article for more info about the box-sizing property.

FIDDLE

So if your header was say 64px high, then you'd do something like this:

 .container {
   height: 100%;
   background: pink;
   margin-top: -64px;
   padding-top: 64px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

<header>header</header>
<div class="container">
  <div class="content">
    content here
  </div>
</div>

score 0 · Answer 5 · answered Jun 25 '13 at 08:48

0

Since both Divs are using 100% height set on the html and body tag you only need to set it there then zero your margin and padding. Generally if you have to set a div and its parent div both to 100% height you're overdoing it.

answered Jun 25 '13 at 08:48

James Pickering

105
1
1
8

HTML height 100 % causes page overflow

5 Answers5