1

我正在尝试构建一个页面布局，其中左列具有固定的宽度和 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;
}

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

4

3 回答 3

3

试试这个：

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

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

于 2009-08-20T01:04:53.340 回答
2

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

正如我看到的“现场示例”，这就是您要的

于 2009-08-20T01:05:34.700 回答
1

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

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

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

于 2009-08-20T01:04:14.527 回答