gpt4 book ai didi

CSS,相对定位的div中的绝对div

转载 作者:行者123 更新时间:2023-11-28 15:02:23 26 4
gpt4 key购买 nike

给定以下代码,如何使包装器 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>

最佳答案

添加这个:

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

您将遇到问题,因为您的 wrapperDiv 比它包含的 div 更宽。不确定你想对此做什么。

关于CSS,相对定位的div中的绝对div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1576281/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com