当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS - can't get min-height working

问题描述:

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.

网友答案:

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.

网友答案:

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;
}
网友答案:

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/

分享给朋友:
您可能感兴趣的文章:
随机阅读: