Very simple CSS minimum height 100% issue with margin

Question

I'm looking for suggestions how to set a div to min-height:100% when it has a 15px margin-top? What I want is for the div to touch the bottom of the screen (without triggering scrollbars), however when the content is too large to fit, it automatically expands below the screen limit, triggering scrollbars. Here's what Ive got so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body, html{height:100%; margin:0;}
body{background:#AAA}
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
</style>
</head>

<body>
<div id="main">
try duplicating this content until it does not fit in the box 
</div>
</body>
</html>

Possible duplicate of: http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin — Cyrille, Jan 15 '12 at 20:03
Yes I've seen this thread but try the solution - text overflows out of the box and the box stays the same size in modern browsers. — cronoklee, Jan 15 '12 at 20:19

score 0 · Answer 1 · answered Jan 15 '12 at 20:07

0

You can use the following css to fix the div to the bottom

#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}

answered Jan 15 '12 at 20:07

udnisap

899
1
10
19

score 0 · Accepted Answer · answered Jan 16 '12 at 13:25

0

I found a solution: Use the new CSS3 box-sizing rule on body and set it to padding-top:15px; remove the margin-top on #main and it works exactly as described above in all new browsers.

answered Jan 16 '12 at 13:25

cronoklee

6,482
9
52
80

Very simple CSS minimum height 100% issue with margin

2 Answers2