CSS full height div with margin?

Question

I've looked everywhere, and can't figure out if there's a way to do this. Basically, I want to mimic this layout, without using the CSS3 attributes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Bad way...</title>
 <style>
  html,body{
   margin:0px;
   height:100%;
  }
  .tall{
   background-color:yellow;
   min-height:100%;
   height:100%;
   padding-top:50px;

   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
  }
  .short{
   background-color:blue;
   height:100%;
  }
 </style>
</head>
<body>
<div class='tall'>
 <div class='short'>
  Foo bar baz
 </div>
</div>
</body>
</html>

I don't care how much extra markup or CSS there is, as long as its cross-browser compatible. I would just settle with the ol' faux columns, but it won't work in this situation. The short div is going to have an iframe, which needs to be the full height.

The tall div is just there to show what its supposed to look like. All I want, is a div that is full height, but with a 50px margin on top. All of my attempts just extend the height to 100% + 50px.

I know I can do it with JavaScript, but I would really like to get a CSS solution if its possible.

http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space — Bryan Downing, Dec 17 '10 at 06:10
Hmmm, none of those answers seem to work if a `height:100%` iframe is used as the content. — Azmisov, Dec 17 '10 at 06:24

score 2 · Accepted Answer · answered Dec 17 '10 at 09:26

2

You can use absolute positioning as described here: http://www.alistapart.com/articles/conflictingabsolutepositions/

You can specify all sides of div e.g.

position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;

answered Dec 17 '10 at 09:26

Ivan Ivanic

2,982
1
20
21

You might be able to achieve this with box-sizing css3 property as well – Ryan Oct 12 '12 at 17:48

score 1 · Answer 2 · answered Dec 17 '10 at 05:48

1

Instead of " padding-top:50px;" in .tall{} use margin-top:50px;

answered Dec 17 '10 at 05:48

mr.b

2,708
8
39
64

My example just shows what kind of a div I want: I want a div that acts the same way as `short`, without using CSS3. Basically, a `max-height:100%` div with a `margin-top:50px`. – Azmisov Dec 17 '10 at 05:53

score 1 · Answer 3 · answered Dec 17 '10 at 05:53

1

remove:

.tall{
   min-height:100%;
  }

along with css3 property. Should work fine. New css would look like

.tall{
   background-color:yellow;
   height:100%;
   padding-top:50px;
  }
  .short{
   background-color:blue;
   height:100%;
  }

answered Dec 17 '10 at 05:53

Tarun

5,374
4
22
32

That makes the `tall` div extend beyond the page to height 100% + 50px. I need 100% to be the max-height for the page. – Azmisov Dec 17 '10 at 05:57

CSS full height div with margin?

3 Answers3