孩子身高是滾動父內容高度的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％

回答

相關問題