css - 使用 div 创建混合像素/百分比布局

Question

我正在尝试制作一个页面布局，如所附图片所示。问题是我无法让它正常工作。我花了半天时间试图让它工作，但没有成功。我只想要一个固定宽度的 div 用于菜单，然后在这两个 div 旁边创建列，每个列占用剩余页面宽度的一半。高度都需要依赖于内容。

有什么想法吗？我可以找到很多关于这种混合百分比/像素布局的信息，但我无法想象它有那么难。

图片:

Answer 1

类似的东西:

<style type="text/css">
.container
{
  padding-left: 160px;
  position: relative;
}
.leftmenu
{
  width: 160px;
  height: 200px;
  background: red; /* For demo purposes */
  position: absolute;
  top: 0;
  left: 0;
}
.width50
{
  width: 50%;
  float: left;
}
.left-content
{
  height: 300px;
  background: green /* For demo purposes */
}
.right-content
{
  height: 150px;
  background: blue   /* For demo purposes */
}
.clear
{
  clear: both;
}
</style>
<div class="container">
  <div class="leftmenu"></div>
  <div class="content">
    <div class="width50 left-content"></div>
    <div class="width50 right-content"></div>
    <div class="clear"></div>
  </div>
</div>

那只是内部容器(没有页眉或页脚)