gpt4 book ai didi

html - 页面高度为 100% 的相对 div 内的绝对 div

转载 作者:太空宇宙 更新时间:2023-11-04 03:37:07 24 4
gpt4 key购买 nike

我有以下 html,需要保持原样:

<body>
<div id="wrapper">
<div id="content">some text</div>
</div>
</body>

现在我需要制作内容 div 以 100% 填充页面。我尝试跟随 CSS 但没有成功:

body {
height: 100%;
}
#wrapper {
position: relative;
}
#content {
position: absolute;
background: red;
height: 100%;
}

参见此处:http://www.cssdesk.com/hHZyD

最佳答案

检查这个fiddle

我已经将 CSS 编辑为

CSS

html,body {
height: 100%;
}
#wrapper {
position: relative;
height: 100%;
}
#content {
position: absolute;
background: red;
height: 100%;
}

首先,为了以百分比表示高度,html 和 `body 的高度应该设置为 100%即

html,body {
height: 100%;
}

下一步要使百分比起作用,父 div 应该被赋予一个高度。所以我改变了CSS

#wrapper {
position: relative;
height: 100%;
}

更新

正如@ctwheels 在他的评论中指出的那样,如果 OP 需要高度和宽度都为 100%,

检查 fiddle

这里我将两个 div 的宽度设置为 100%。

关于html - 页面高度为 100% 的相对 div 内的绝对 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25388753/

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