CODEWITHSUNDEEP
htmlcss
Arnaud Denoyelle
Arnaud Denoyelle

Reputation: 31283

HTML height 100 % causes page overflow

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.

Upvotes: 3

Views: 4665

Answers (5)

rpasianotto
rpasianotto

Reputation: 1413

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>

Upvotes: 2

Danield
Danield

Reputation: 125641

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>

Upvotes: 0

Brewal
Brewal

Reputation: 8199

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.

Upvotes: 1

James Pickering
James Pickering

Reputation: 105

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.

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this:

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

CSS :

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

Upvotes: 0

Related Questions