Question

我有以下代码：

<!doctype html>
<html>
<head>
  <style type="text/css">
    #left {
      float: left;
    }

    #left_top, #left_bottom {
      height: 50%; /* Not working... */
    }

    #right {
      float: left;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <div id="left">
    <div id="left_top">A</div>
    <div id="left_bottom">B</div>
  </div>
  <div id="right">
    Content
    <br />
    Content
    <br />
    Content
  </div>
</div>
</body>
</html>

ID为left_top和left_bottom的两个DIV应占据周围DIV（#left）高度的50％。我怎样才能做到这一点？

谢谢和问候！

Answer 1

您假设left与content的高度相同，但这不是div的工作方式。

您可以看到这有效here。

一种方法是同时为left和right指定相同的height。

替代方案，对于更灵活的布局，将使用CSS表，而不是浮点数：

Demo Fiddle

CSS

#wrapper {
    display:table;
    height:0%; /* to provide a base 'autofit' height */
}
#left, #right {
    display:table-cell;
}
#left_top, #left_bottom {
    height: 50%;
}

嵌套DIV宽度％高度

1 个答案:

Demo Fiddle