Question

我有一个包装器div，我想扩展它来包装动态生成的内容。生成的内容是一个表，它会根据返回的结果数量而增加。

prod

它没有显示所有结果，当我将溢出更改为可见时它显示除了包装div之外的所有结果，并且我仍然希望页脚div始终位于底部。

Answer 1

正如有人在评论中所说，height: auto;应该可行。但是你的代码很乱。我想你不明白css职位如何运作; 让我们创建一个容器（.Container）并填充父（.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }）。只需为dymanic内容块添加{ position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; }。

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #F72F4E;
  overflow: hidden;
}

.Container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 5px solid #408080;
  overflow: hidden;
}

.Content {
  position: absolute;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: auto;
  bottom: 0; //or top: 0;
  background: rgba(0,0,0,.2);
}

<main class="Container">
  <div class="Content">Dynamic Content</div>
</main>

Answer 2

这里有一些小问题：）

首先：您已将高度设置为固定值“1341px”。因为你已经将它设置为这个值，你的div永远不会高于1341px。如果您希望div仅在内容大于1341px时进行缩放，则可以使用min-height。

第二：你的#Table定位为绝对。这意味着父级将在渲染时始终忽略#Table元素的大小。

我建议您快速查看http://www.w3schools.com/css/css_positioning.asp，了解有关此问题的更多信息。

尝试以下css：

#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}

#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}

快乐编码：）

如何使div扩展以包装css中的动态内容

2 个答案: