子级高度应为可滚动父级内容高度的100％ [英] Child height to be 100% of scrollable parent content height

问题描述

请考虑以下提示: 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.任何提示非常感谢！

解决方案

一种解决方案是将.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;
}

它在您的示例中不起作用的原因是因为您将最大高度设置为300px.然后假设100％的高度.bar的高度为300px.通过这种解决方法，您的.parent分隔符没有300px的高度限制，但是外部的.container却没有.

Please consider this fiddle: http://jsfiddle.net/eKJAj/

I'm trying to have an absolute positioned div (the red line) to take the whole height of the total height of its (yellow) parent ; not just the parent's visible height.

If you try the fiddle you'll see the red bar doesn't go the whole way down when you scroll the yellow div. Also it can't be bigger than its parent if some blue sections are removed.

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

I have been trying a few options for the blue bar such as top:0px; botom:0px or position:relative; margin-left:50px and even made an attemps with floating the red line, to no avail.

If possible I'd rather keep it CSS only. Any hint much appreciated!!

解决方案

One solution is to wrap your .parent in a(nother) container.

JSFiddle.

Set your .parent's container to have the max-height and overflow-y instead:

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

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

The reason it's not working in your example is because you're setting the maximum height to 300px. The 100% height .bar is then assuming a height of 300px. With this workaround, your .parent divider doesn't have a 300px height limit, but the outer .container does instead.

这篇关于子级高度应为可滚动父级内容高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！