需要 CSS Column Divs 帮助答案

【问题标题】：CSS Column Divs Help needed需要 CSS Column Divs 帮助
【发布时间】：2009-08-20 09:10:55
【问题描述】：

我正在尝试构建一个页面布局，其中左列具有固定的宽度和 100% 的高度（无论右列是什么），而右列具有可变宽度。我尝试了各种方法，但似乎无法正确..

这是我的代码：

<div id="pageHolder">
  <div id="topSection">
    header goes here
  </div>
  <div id="pageContainer">
    <div id="leftColumn">
      <div id="leftHolder">
        left stuff goes here
      </div>
    </div>
    <div id="rightColumn">
      <div id="rightHolder">
        right stuff goes here
      </div>
    </div>
  </div>
  <div id="bottomSection">
    footer goes here
  </div>
</div>

我的 CSS 是：

body {
  height: 100%;
}
div#pageHolder {

}
div#topSection {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#pageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#leftColumn {
  position: relative;   
  float: left;
  width: 285px;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
div#leftHolder {
  padding: 25px 25px 25px 25px;
  margin: 0px 0px 0px 0px;
}
div#rightColumn {
  position: relative;   
  height: 100%;
  min-height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 285px;
}
div#rightHolder {
  padding: 25px 25px 25px 25px;
  margin: 0px 0px 0px 0px;
}
div#bottomSection {
  clear: both;
}

如果有人可以帮助我，那就太好了:)

【问题讨论】：

标签： css html fluid

【解决方案1】：

试试这个：

div#leftColumn {
  position: absolute;   
  float: left;
  width: 285px;
  height: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}

**编辑：再想一想，如果你想保持位置，也许使用 maxwidth 和 maxheight 可以帮助你：相对。

【讨论】：

非常感谢，成功了，只需要添加 left: 0px; :)
如果可以，请在不同的浏览器上尝试，以确保它在任何地方都能正常工作。
Internet Explorer 往往会发生一些奇怪的事情：S

【解决方案2】：

http://css-tricks.com/the-perfect-fluid-width-layout/

当我看到“live example”时，这就是你要的

【讨论】：

【解决方案3】：

我相信你想在你的 css 中用body, html 替换你的body 定义，并为pageHolder 添加一个高度

body, html {
  height: 100%;
}
div#pageHolder {
  height: 100%;
}

这很烦人，因为不管里面的内容如何，你都会得到不必要的滚动条。这是你想要达到的目标吗？

【讨论】：

会补充一下，谢谢.. 但我试图让左列的高度为 100%（取决于右列中有多少内容），如果这有意义吗？跨度>
00% 高度（取决于右栏内有多少内容），您的意思是与右栏相同的高度，对吗？
是的，我就是这个意思，对不起:)
啊，我很高兴 Partial 能帮上忙 :) 干杯。