html - 溢出:隐藏和 % 高度

Question

我正在创建一个页面，我不想要任何固定的 px 高度并且还使用 overflow:hidden。

我的 HTML 是这样的；

<div class="scrollable fl">
...Some content
</div>

CSS定义为；

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

还要补充一点，我已经将 overflow:hidden(对于某些父级也带有 float:left)赋予了可滚动的所有父级/祖先 div ..

现在的问题是，如果我将高度设置为 100%，可滚动的 div 不会根据其内容扩展(固定 px 高度是这样的……但我没有那个选项，因为我正在设计一个完全流畅的布局)

我从我这边尝试了 2 件事，但没有用；1. 使高度链保持事件状态(即为 scrollable 的所有父/祖先 div 提供 100% 的高度。2. 尝试使用 height:auto 实现可滚动

我该如何解决这个问题？

Answer 1

div 设置为其内容所需高度的 100%，而不是您想要的高度。

尝试:

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    top:0px;
    bottom:0px;
    width: 100%;
}

您可能还需要对链上游的其他元素执行此操作。