使用css设计css流体/固定布局而不使用表格

Question

如何在不使用任何表的情况下如何设计以下布局？

我已经尝试但无法将3个中央div元素的高度设置为100％高度。

任何帮助将不胜感激。提前谢谢！

Answer 1

我用于三个相等高度列的一个非常有用且简单的解决方案如下：创建一个位于relative和height:100%的包装器。然后，所有孩子都定位absolute并添加height:100%，将占据您的包装器的整个高度。由于定位它们absolute会将其移动到屏幕的左上角，因此您应用margin-left相应地将其移动到浏览器的右侧。

<强> HTML

<div id="wrapper">
    <div id="first" class="column"></div>
    <div id="second" class="column"></div>
    <div id="third" class="column"></div>
  </div>

<强> CSS

body,html,#wrapper,.column {height:100%;}
  #wrapper {position:relative;}
  .column {position:absolute;border:1px solid black;width:33.3%}
  #second {margin-left:33.3%}
  #third {margin-left:66.6%}

演示： http://jsbin.com/igoso4

我在firefox，chrome，safari中测试了上述方法，即7,8 +，opera。