Html 100%页面高度的相对div中的绝对div_Html_Css

Html 100%页面高度的相对div中的绝对div

html css

Html 100%页面高度的相对div中的绝对div,html,css,Html,Css,我有以下html，需要保持原样： <body> <div id="wrapper"> <div id="content">some text</div> </div> </body> 请参见此处：检查此项我将CSS编辑为 CSS html,body { height: 100%; } #wrapper { position: relative; height: 1

我有以下html，需要保持原样：

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

请参见此处：

检查此项我将CSS编辑为

CSS

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

首先，对于以工作百分比表示的高度，

html

和` body'的高度应设置为100% 即

接下来要让百分比起作用，应该给父div一个高度 css到

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

更新

如@ctwheels在其评论中所述，如果OP要求高度和宽度均为100%

检查

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

css

添加

宽度：100%；高度：100%

到

#包装器

和

#内容

发生了什么事？？？为什么答案不断被否决？？？这是正确的答案。OP本身接受了。如果OP已经接受了答案，我会投赞成票，据我所知，OP要求内容填满页面（意味着宽度和高度）。你的解决方案只攻击高度，而不是宽度。似乎这可能是对OP所指内容的误解，他们说“现在我需要制作内容分区以100%填充页面”。谢谢。这涵盖了OP的问题（误解与否）

html,body {
        height: 100%;
}

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

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