Question

我在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;
}

如果搜索结果不多，一切正常，i。。即如果它们都适合屏幕，但只要有这么多结果，用户必须滚动才能看到它们，div就会增长（溢出中的元素遵循CSS代码中的位置指令），但它的白色而且边界不适合。这看起来非常愚蠢，我还没有找到解决这个问题的方法。有人可以帮帮我吗？

编辑：我忘了提到如果我用HTML文件中的文本段落手动执行相同的操作，一切都按预期工作，我。即div以我给它的每一种风格扩展。

Answer 1

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;
}

Answer 2

您可以添加：

overflow-y: scroll;

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

编辑 -

或者，您可以尝试：

min-height: 100%;

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

如何让div的风格随着div的大小而增长？

2 个答案: