绝对定位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父容器的高度

回答

相关问题