如何使 div 的样式随着 div 的大小而增长？答案

【问题标题】：How to make the style of a div grow with the div's size?如何使 div 的样式随着 div 的大小而增长？
【发布时间】：2017-11-22 06:41:51
【问题描述】：

我在一个 HTML 文件中有一个 div，其中包含来自查询的所有搜索结果，因此它的大小是动态的。我给了它以下用 CSS 编写的样式：

#content {
position: absolute;
width: 75%;
min-height: 100%;
left: 13%;
right: 12%;
top: 12%;
background-color: #FFF;
border-left: 3px solid #81DAF5;
border-bottom: 3px solid #81DAF5;
word-wrap: break-word;
}

如果搜索结果不多，一切都很好，即。 . e.如果它们都适合屏幕，但是一旦有太多结果用户必须滚动才能看到它们，div 就会增长（溢出中的元素遵循 CSS 代码中的位置指令），但它的颜色为白色边界没有。这看起来很傻，我还没有找到解决这个问题的方法。谁能帮帮我？

编辑：我忘了提到，如果我对 HTML 文件中的文本段落手动执行相同的操作，一切都会按预期进行，即。 e. div 会随着我给它的每种样式而扩展。

【问题讨论】：

标签： html css styles stylesheet

【解决方案1】：

您可以添加：

overflow-y: scroll;

此时，该框的大小保持不变，但它可以滚动以查看可能有多少结果。

编辑 --

或者，您可以尝试：

min-height: 100%;

允许其扩展超出其初始大小。

【讨论】：

是的，我知道，但这不是我想要的，我希望页面可以滚动，但只能通过浏览器中已有的滚动条滚动。
你看过 min-height: 100% 吗？这会将高度设置为 100%，然后允许它根据内容扩展。
哦该死的，我实际上使用的是最小高度，我在上面输入错误。但即便如此，除非我用段落手动填充页面，否则这种奇怪的行为仍然存在。在后一种情况下，很奇怪，它的行为符合预期。
听起来这里可能还有更多事情要做。也许您可以发布更多的 html 或演示链接？
没关系，我刚刚想出了另一种方法，但无论如何，感谢您的帮助和时间。

【解决方案2】：

Kirk 的回答将允许您滚动，但您可能希望添加具有相对位置的父元素。这样，当您将绝对定位元素的高度设置为 100% 时，它将占用父元素高度的 100%。相对定位的父元素应该与数据一起干净地展开。

因此，在这种情况下，您可能需要设置父元素的样式。

<div class="parent">
  <div class="dynamic-content"></div>
</div>

CSS：

.parent {
   position: relative;
   background-color: #FFF;
   border-left: 3px solid #81DAF5;
   border-bottom: 3px solid #81DAF5;
   margin: 12% auto 0;
}

.dynamic-content {
  height: 100%;
  word-wrap: break-word;
}

【讨论】：

我试过了，但效果不佳，我的代码中似乎还有更多与此不太兼容的内容。但是，我知道这应该可行。没关系，我刚刚想出了另一种方法，但仍然感谢您的帮助和时间。