Question

这是一个常见的问题，但与我找到的解决方案略有不同，我一直试图解决它而没有成功，所以如果有人能给我一个帮助，我会很感激。

我有一个#wrapper div，可以扩展到100％的浏览器宽度和高度。到目前为止，非常好......现在，在#wrapper内部，我需要一个#content div，它与父div一起自动延伸，并保持30px左右的余量。我（几乎）设法做到了，但我不能让#content div拉伸到它的高度。以下是我正在尝试做的一个例子：

example

这是我的CSS代码：

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

html, body {
  height: 100%;
  width: 100%;
  text-align: center;
  cursor: default;
}

#wrapper {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  position: absolute;
  background: #333;
  text-align: center;
}

#content {
  /*width: 100%;*/
  min-height: 100%;
  height: auto !important;
  margin: 30px;
  overflow: hidden;
  background: #ccc;
}

这是HTML：

<body>

<div id="wrapper">

  <div id="content">
    This DIV should stretch to 100% height of its parent and body 
    minus the 30px margin around and resize as the window is resized.<br />
    It's working in width but not in height!<br /><br />
    Whatever goes in here (a child DIV) no matter its size should not be 
    visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
  </div>

</div>

</body>

这就是我在Chrome和IE中所获得的：

current result in Chrome and IE

对此有何帮助？可能吗？我错过了一些愚蠢的东西吗？

提前致谢， LM

Answer 1

在.css中，将#content替换为以下

#content {
  overflow: hidden;
  background: #ccc;
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;  
}

Answer 2

#content {
  min-height:90%;
  position:absolute;
  margin: 5%;
  overflow: hidden;
  background: #ccc;
}

DIV内部可调整大小的DIV 100％高度，边缘周围不能正常工作！有些帮助吗？

2 个答案: