絕對定位div父容器的高度

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="main"> 
    <div class="left"> 
    </div> 
    <div class="right"> 
    </div> 
    </div> 
</body> 
</html>

CSS：

.main { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    background-color: yellow; 
    overflow: auto; 
} 

.left { 
    background-color: orange; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px; 
    height: 2000px; 
} 

.right { 
    background-color: orangered; 
    position: absolute; 
    top: 0; 
    left: 200px; 
    right: 0; 
    bottom: 0; 
}

這裏舉例：http://jsbin.com/fafexulube/edit?html,css,output

更新：左div的高度不能改變，它有2000像素，顯示它是高於其父母。

來源

2015-02-04 andriys

絕對需要你絕對定位一切嗎？否則，您可以考慮各種解決方案，使用表格單元格，彈性盒等。 – Terry

它與領土...如果沒有明顯的解決方案，那麼我可能會去與表格單元格。 – andriys

如果您將父母上的position設置爲static以外的其他值，則可以在孩子上使用height:100%;或top:0; bottom:0;。

如果您想讓兄弟姐妹定義父級的高度，則無法將其設置爲position:absolute;。

看看這個更新的jsbin：http://jsbin.com/qavihuleme/3/edit。

具體而言，將position:relative;添加到父級，並從兄弟（.left）刪除position:absolute;。

來源

2015-02-04 22:52:55

當您在父級上設置高度並使子div爲父級的高度時，您已更改問題。在最初的問題中，高度由左邊的div驅動。 – andriys

太棒了！這就是我一直在尋找的。謝謝！ – andriys

http://jsbin.com/cacopejabe/1/

製作格大小匹配......黃色的div是容器因此你需要做其他兩個div相同的大小...我拿出2000像素的高度上留下...你可以選擇把2000像素黑色高度（紅色）。

來源

2015-02-04 22:47:52 spooky

左右div的大小由其動態生成的內容決定。你的建議可能不起作用，因爲這 – andriys

你有「高度：2000px;」的樣式在「。左側」，這是什麼導致不匹配你的評論不符合您提交的代碼... – spooky

2000px在我的例子是一個簡化，這意味着有一些高度的內容。這個高度使父母調整，但不是正確的div。正如我所看到的，評論符合代碼。 – andriys

那麼問題是絕對的位置是一切，它是混亂的佈局，你應該真的使用浮動或如果你不喜歡舊的瀏覽器，flexbox。這是深邃的和骯髒的js/jQuery解決方案xD：

jQuery(document).ready(function($) { 
    var height = $('.left').css('height'); 
    $('.right').css('height', height); 
});

來源

2015-02-04 23:06:55 IGRACH

絕望的時代:) – andriys

絕對定位div父容器的高度

回答

相關問題