Question

我正在学习CSS并且无法让我的#wrapper DIV扩展以适应它的内容。
我确保我的容器都有100％的高度，最小高度似乎没有做任何事情，但我也尝试过#wrapper，html和body。它与相对与绝对定位有关吗？以下是我在下面工作的一个例子，非常感谢任何帮助。

（由业主更新4.21.11）

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS_Alpha_textArea</title>
<style type="text/css">
html {
    height: 100%;
    clear: both;
}

body {
    margin: 0px;
    padding: 0px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#FFF;
    font-size: 100%;
    line-height: 1em;
    background-color: #gray;
    background-size: 100%;
    height:100%;
    clear: both;
}

#wrapper {
    margin-right: auto;
    margin-left: auto;
    /*background-color: #FFF;*/
    width: 75%;
    height:100%;
    position: relative;
    clear: both;
}

.screen {
    margin-right: auto;
    margin-left: auto;
    background-color: #3B6AA0;
    width: 75%;
    height:100%;
    filter: alpha(opacity=20);
    /* CSS3 standard*/
    opacity:0.20;
    z-index: -100;
    position: absolute;
    left: 12%;
    right: 12%;
    clear: both;
}

.overlay {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    height:100%;
    z-index: 100;
    position: absolute;
    left: 12%;
    right: 12%;
    padding: 0px;
    clear: both;
}

#textArea {
    height: auto;
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    color: #FFF;
}
</style>

</head>
<body>

    <div id="wrapper">
    <div class="screen"></div>
        <div class="overlay">
            <div id="textArea">
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            <p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br><p>textArea</p><br>
            </div>
        </div>
    </div> 

</body>
</html>

Answer 1

100％属性意味着它将适合父母的身体。

检查一下 http://cssbeauty.com/skillshare/discussion/30/100-width-and-height/

Answer 2

您的链接已关闭，但如果您将overflow:hidden;添加到#wrapper，您将获得所需的效果。

请记住，绝对定位会从文档的自然流中移除元素，因此您需要考虑每个项目的内容如何溢出其容器。

Answer 3

对于容器div，通常最好不要使用height属性（除非您想因特定原因限制它）。这将允许高度根据需要扩展。

DIV容器高度受浏览器窗口限制

3 个答案: