HTML + CSS : take all available viewpoer

Question

我正在尝试使用标题(采用所有可用宽度和 130px 高度)、2 列(1:300px 宽度所有可能的高度，2:第 2 列采用 300px 和 15-20px 之后的所有可用宽度)制作液体 HTML 布局它们之间的边距)。

Atm 我有这个:

HTML:

<div class="wrapper">
   <div class="header">
      <!-- .... -->
   </div>
   <div class="content">
      <div class="left-column">
        <!-- ... -->
      </div>
      <div class="right-column">
        <!-- ... -->
      </div>
   </div>
</div>

CSS:

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 1000px;
  min-height: 500px;
}

body {
  font: 12px sans-serif;
  background-color: #fff;
  color: #000;
}

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.header {
  padding: 0 30px;
  height: 100px;
  left: 0px;
  right: 0px;
  position: absolute;
  border: 1px solid black;
  border-top: none;
}

.content {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: 10px 20px;
  border: 1px solid black;
}

.left-column {
  float: left;
  width: 300px;
  border: 1px solid black;
}

.right-column {
  margin-left: 315px;
  border: 1px solid black;
}

问题是:有没有更好的解决方案？

谢谢。

Answer 1

我拿了你的 HTML 并为你创建了这个 fiddle :http://jsfiddle.net/RdQJY/1/ .我没有使用你的任何 CSS - 我只是不喜欢你使用它的方式使用的定位，所以决定从头开始编写它(对此感到抱歉)。 lorem ipsum 文本只是作为占位符存在 - 如果删除它，您会看到 div 将占据整个窗口。希望这对您有所帮助!

P.S.:我的等高列方法的唯一缺点是没有简单的方法给它们应用底部边框。