Question

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

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

如果您想查看该页面，可以看到它here。非常感谢你的帮助。

Answer 1

请务必在margin: none;和padding: none;的初始声明中加入html和body：

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

Answer 2

同样给editBox一个高度，它等于与上面元素高度的差值。为html和body元素设置margin，padding为0以避免溢出。

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

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

Answer 3

我已经改变了一点

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/

Answer 4

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

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

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

4 个答案: