HTML+；CSS：获取所有可用的viewpoer

我正在尝试使用标题（获取所有可用宽度和130px高度）、两列（1:300px宽度所有可能高度、2:2列获取300px和它们之间的15-20px边距后的所有可用宽度）来创建liquid HTML布局

我有这个：

HTML:

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

---

谢谢。

我用你的HTML为你创建了这把小提琴：。我没有使用你的CSS——我只是不喜欢你使用它的方式，所以决定从头开始写（很抱歉）。lorem ipsum文本只是作为占位符存在的——如果删除它，您将看到div将占据整个窗口。希望这有帮助

---

注：我的等高列方法的唯一缺点是，没有简单的方法将底部边框应用于这些列。

看起来是一个相当标准的设置，我猜边框只是为了查看布局情况。你想改变哪些方面？注意：在检查你已经得到的东西时，我在这里为你添加了一把小提琴：是的，边界只是为了看看发生了什么。我担心的是剩下的：0；右：0也许应该调整填充/边距以使宽度：100%正常工作？是的！正是我需要的。我不喜欢那种位置：绝对和左/右：0。非常感谢。

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

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;
}