Question

如何使红色div在高度上等于父黄色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的高度无法更改，它有2000px以显示它高于其父级。

Answer 1

如果您将父级position设置为static以外的其他内容，则可以对孩子使用height:100%;或top:0; bottom:0;。

如果您希望兄弟姐妹定义父级的高度，则无法将其设置为position:absolute;。

看看这个更新的jsbin：http://jsbin.com/qavihuleme/3/edit。

具体而言，将position:relative;添加到父级，然后从兄弟级position:absolute;中删除.left。

Answer 2

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

使div大小匹配...黄色div是容器因此你需要制作其他两个相同大小的div ...我在左边拿出2000px高度...你可以选择将2000px高度放在黑色（你的红色））。

Answer 3

问题在于所有内容都是绝对的位置，它会使布局变得混乱，你应该使用浮点数，或者如果你不关心旧的浏览器，那就是flexbox。这是内心深处和脏js / jquery解决方案xD：

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

将绝对定位的div设为父容器的高度

3 个答案: