孩子身高是滚动父内容高度的100％

请考虑此琴：http://jsfiddle.net/eKJAj/孩子身高是滚动父内容高度的100％

我想有一个绝对定位的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，甚至与浮动红线作出了attemps，以徒劳无功。

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

来源

2013-03-06 Johann

看看你是否可以与你http://jsfiddle.net/eKJAj/14/ 虽然我不是HTML专家 – DevelopmentIsMyPassion 2013-03-06 09:16:59

没有对不起，它看起来像你刚才做出的部分更小，所以父div不'不得不滚动。不幸的是，父div中可能有很多节，所以它必须滚动。虽然谢谢！ – Johann 2013-03-06 09:22:18

一种解决方案是将您的.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假定300px的高度。通过此解决方法，您的.parent分隔线没有300像素的高度限制，但是外部的.container可以代替。

来源

2013-03-06 09:23:20

我会在'.parent'里面添加'.container'，但是这个差别很小。 – xpy 2013-03-06 09:25:52

这太棒了！我错误地认为添加一个包装似乎解决了很多常见的CSS问题？下次我会记住这一点！非常感谢 – Johann 2013-03-06 09:30:19

孩子身高是滚动父内容高度的100％

回答

相关问题