css - 使用 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,ie 7,8+,opera测试过