CSS - can't get min-height working

Question

I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.

I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.

Here's my HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="stylesheet.css" />
    </head>
    <body>
        <div id="container">
            content here.
        </div>
    </body>
</html>

Here's the CSS:

html {
    height: 100%;
}

body {
    background-color: #F00;
    margin: 0;
    min-height: 100%;
}

#container {
    background-color: #0F0;
    width: 1000px;
    margin: 0 auto;
    height: 100%;
}

I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?

By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.

Does http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin help? — andyb, Jul 23 '11 at 09:41

score 2 · Accepted Answer · edited May 23 '17 at 12:07

Here is a working sample:

<!doctype html>
<html>
<head>
    <title>Container sample</title>
    <style>
        html, body
        { 
            margin: 0;
            padding: 0;
            height: 100%;
            background: red;
        }
        #container 
        {
            background: green;
            width: 1000px;
            min-height: 100%;
            margin: 0 auto 0 auto;
        }
    </style>
</head>
<body>
    <div id="container">
        Container sample
    </div>
</body>
</html>

For more information take a look at my answer to a similar question.

anil tiwari · Answer 2 · 2011-07-23T09:54:35.950

1

you can use property position absolute for your requirement. It may help you

 #container {
    background-color: #0F0;
    width: 1000px;
    margin: 0 auto;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-500px;
}

edited Jul 23 '11 at 09:54

answered Jul 23 '11 at 09:39

anil tiwari

306
1
3
7

Unfortunately that stops the green area from being centered. – ryyst Jul 23 '11 at 09:48

score 0 · Answer 3 · answered Jul 23 '11 at 20:06

0

Give your #container a position:absolute; with top and bottom set to 0.

#container {
    background-color: #0F0;
    width: 1000px;
    margin: 0 auto;
    position:absolute;
    top:0;
    bottom:0;
}

http://jsfiddle.net/jasongennaro/4ZLcD/

answered Jul 23 '11 at 20:06

Jason Gennaro

34,535
8
65
86

CSS - can't get min-height working

3 Answers3