最小 - 高度與兒童設置爲：絕對

我有一個小孩div設置爲相對於其父母的絕對位置的容器div。容器div具有最小高度集合，但是當子div的高度在父級高度上擴展時，父級操作會拉伸。這是由於孩子的絕對定位。是否有任何想法如何，我可以讓家長與孩子伸展，其高度的增加最小 - 高度與兒童設置爲：絕對

#parent{ 
position:relative; 
min-height:200px; 
width:200px; 
} 

#child{ 
    position:absolute; 
    top:0; 
    left:0; 
    min-height:150px; 
} 

<div id="parent"> 
<div id="child"></div> 
</div>

來源

2011-04-27 Richard Banks

爲什麼你需要絕對定位子元素？這似乎是不必要的。 – LostLin 2011-04-27 20:52:37

你知道父div的高度嗎？還是隨着時間的推移而變化？ – 2011-04-27 20:52:49

@ima學生原因是我需要並排設置2個子div。我會使用浮動，但我需要設置zindex。你只能這樣做，如果該元素有絕對或相對的位置 – 2011-04-27 22:27:42

你所想要實現純不可能，只是一個簡單的事實是，當你添加一個絕對的規則的元素，你隱式地將它從正常的佈局上下文中取出。在一個相對的父容器中只意味着它有一個定義的盒子，它將包含它並設置該元素的默認x和y座標，默認情況下它是窗口，這就是爲什麼當相對位置沒有分配給父絕對定位元素將相對於瀏覽器窗口的左上角。

現在，替代方法可以是使用隱藏在父級中的溢出，併爲剩餘內容使用滾動條。查看jsfiddle我的例子：

#parent{ 
 
position:relative; 
 
min-height:200px; 
 
width:200px; 
 
border: 1px solid #ccc; 
 
overflow-y: scroll; 
 
} 
 

 
#child{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    min-height:150px; 
 
}

<div id="parent"> 
 
<div id="child"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel orci sit amet eros hendrerit tristique. Mauris non felis purus, sit amet molestie dolor. Quisque iaculis ante ac massa suscipit fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel lectus urna, vel condimentum felis. In vel justo lorem, vel vulputate tortor. Morbi hendrerit erat at ipsum tempus ut sollicitudin nisi consectetur. Suspendisse potenti. Donec varius orci at mi consequat porttitor. Integer vestibulum convallis ultricies. Mauris imperdiet mauris nec nunc fringilla varius. Nunc molestie tempus mi, quis congue libero iaculis eget. Vestibulum a odio nisl. Mauris mollis consequat est, id porttitor metus semper sed. Sed magna lacus, pulvinar vel laoreet vel, dignissim at sem. Aliquam erat volutpat. Donec sit amet nibh sit amet arcu hendrerit facilisis. Nunc euismod, sapien eget fermentum sagittis, tortor felis varius velit, non tincidunt sapien diam in augue.</p> 
 
    </div> 
 
</div>

來源

2011-04-27 21:15:45 forthehackofit

啊好的。說實話，我不認爲這是可能的，但認爲有人可能會以不同的方式告訴我。感謝你的回答 – 2011-04-27 23:33:13

我不認爲你可以做你的要求。您可以設置body, html: { height: 100%; }，然後將您的父分區更改爲height: 100%;，這將有效地執行您想要的操作。但是如果沒有其他HTML標記的知識，很難在這裏提供一個明智的答案。

來源

2011-04-27 21:23:02

最小 - 高度與兒童設置爲：絕對

回答

相關問題