0

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

自动取款机我有这个：

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

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

谢谢。

4

1 回答 1

2

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

PS：我拥有等高列的方法的唯一缺点是没有简单的方法可以为它们应用底部边框。

于 2011-09-02T00:44:44.620 回答