子高度为可滚动父内容高度的 100%

Posted 2023-03-06

【中文标题】子高度为可滚动父内容高度的 100%

【英文标题】：Child height to be 100% of scrollable parent content height

【发布时间】：2013-02-20 23:46:18

【问题描述】：

请考虑这个小提琴：http://jsfiddle.net/eKJAj/

我正在尝试使用绝对定位的 div（红线）来获取其（黄色）父级的总高度的整个高度；不仅仅是父母的可见高度。

如果您尝试使用小提琴，当您滚动黄色 div 时，您会看到红色条并没有完全向下移动。如果删除了一些蓝色部分，它也不能大于其父级。

html:

<div class="parent">
    <div class="bar"></div>
    <div class="section"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section2"></div>
    <div class="section"></div>
</div>

<input type="button" value="hide" onclick="$('.section2').slideUp(400)" />
<input type="button" value="show" onclick="$('.section2').slideDown(400)" />

css:

.parent
    position:relative;
    width:100%; max-height:300px;
    background-color:yellow;
    overflow-y:auto;


.bar
    position:absolute; left:50px;
    width:1px; height:100%;
    background-color:red;


.section, .section2
    width:100%; height:70px;
    margin-bottom:3px;
    background-color:blue;

我一直在尝试一些蓝色条的选项，例如top:0px; botom:0px 或position:relative; margin-left:50px，甚至尝试浮动红线，但无济于事。

如果可能的话，我宁愿只保留 CSS。任何提示都非常感谢！

【问题讨论】：

看看你是否可以jsfiddle.net/eKJAj/14虽然我不是HTML专家

不，抱歉，您似乎刚刚缩小了该部分，因此父 div 不必滚动。不幸的是，父 div 内可能有很多部分，所以它必须滚动。不过谢谢！

【参考方案1】：

一种解决方案是将您的.parent 包装在一个（另一个）容器中。

JSFiddle.

将.parent 的容器设置为具有max-height 和overflow-y：

<div class="container">
    <!-- parent in here -->
</div>

.container 
    max-height:300px;
    overflow-y:auto;

.parent
    position:relative;
    width:100%;
    background-color:yellow;

它在您的示例中不起作用的原因是您将最大高度设置为 300 像素。 100% 高度 .bar 然后假设高度为 300 像素。使用此解决方法，您的 .parent 分隔线没有 300 像素的高度限制，但外部的 .container 却有。

【讨论】：

我会在.parent 中添加.container，但这没什么区别。

这太棒了！我认为添加包装器似乎可以解决许多常见的 CSS 问题是不是错了？下次我会记住这一点！非常感谢