关于javascript：如何使div以100％的宽度和高度填充其容器？

How to make a div fill its container with 100% width and height?

本问题已经有最佳答案，请猛点这里访问。

我正在创建一个文本编辑器，我正在研究我的div的大小。不幸的是，它并没有占据整个页面。其width和height设置为100%。这是CSS：

1
2
3
4
5
6

html, body {
position:absolute;
z-index:1;
top:0px;
left:0px;
}

如果您想查看页面，可以在此处查看。非常感谢你们的帮助。

相关讨论

它不占据整个高度的原因是父对象很可能不是您想要的100%。将以下代码放在容器样式之前：

1
2
3
4

html,body{
width: 100%;
height: 100%;
}

我把它改了一点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

html,
body,
.container {
position: absolute;
margin: 0;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}

.header {
height: 30px;
vertical-align: middle;
border: 1px solid black;
border-bottom: 0px;
}

#editBox {
height: calc(100% - 33px);
border: 1px solid black;
font-family: 'Open Sans';
overflow: scroll;
}

img.icon {
width: 15px;
}

这里是

http://jsfiddle.net/link2twenty/y9esbelc/

给editBox一个高度，等于与上述元素的高度差。将HTML和body元素的边距、填充设置为0，以避免溢出。

1
2
3
4
5
6
7
8

#editBox {
height: calc(100% - 30px);
}

html, body {
margin: 0;
padding: 0;
}