Question

鉴于以下代码，如何使包装器div的高度一直向下延伸。

<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
.wrapperDiv {
    position: relative;
    width: 800px;
    background-color: #FFFF00;
    margin-right: auto;
    margin-left: auto;
}
.content {
    position: absolute;
    width: 95%;
    top: 55px;
    background-color: #008000;
}
.footer {
    position: absolute;
    width: 95%;
    height: 50px;
    background-color: #FF00FF;
    bottom: 5px;
}
.header {
    position: absolute;
    width: 95%;
    height: 50px;
    background-color: #CCFF33;
    top: 5px;
}
</style>
</head>

<body>

<div id="wrapper" class="wrapperDiv">
    <div id="layer2" class="footer">
        3</div>
    <div id="layer3" class="header">
        1</div>
    <div id="layer1" class="content">
        2<br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        END</div>
</div>

</body>

</html>

Answer 1

添加：

html, body, .wrapperDiv {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
}

然后，您的wrapperDiv会比它包含的div更宽。不知道你想做什么。

Answer 2

您可以使用javascript获取绝对元素的偏移高度，并将其添加到父div的高度。

CSS，绝对div在相对定位的div中

2 个答案: