2

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

我有一个#wrapper div，它延伸到浏览器的 100% 宽度和高度。到目前为止，一切都很好......现在，在#wrapper 中，我需要一个#content div，它会自动拉伸，父div 周围保持30px 的边距。我（几乎）设法做到了，但我无法让#content div 拉伸它的高度。这是我正在尝试做的一个例子：

例子

这是我的 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 中得到的：

Chrome 和 IE 中的当前结果

对此有什么帮助吗？是否可以？我错过了什么愚蠢的东西吗？

提前谢谢，LM

4

2 回答 2

3

在您的 .css 中，替换#content为以下内容

#content {
  overflow: hidden;
  background: #ccc;
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;  
}
于 2013-06-23T21:06:16.503 回答
0 
#content {
  min-height:90%;
  position:absolute;
  margin: 5%;
  overflow: hidden;
  background: #ccc;
}
于 2013-06-23T18:43:05.600 回答