Question

我有以下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

Answer 1

检查此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应该给出一个高度。所以我已经改变了

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

<强>更新

正如评论中指定的@ctwheels，如果OP需要高度和宽度都是100％，

检查fiddle

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

Answer 2

<强> Demo

CSS

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

相对div内的绝对div，页面高度为100％

2 个答案:

检查此fiddle