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

Question

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

有人有想法吗？我可以找到关于这种混合的perecentage /像素布局的很多信息,但我无法想象它是那么难.

图片:

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>

这只是内部容器（没有页眉或页脚）