Question

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

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

Answer 1

试试这个：

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

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

Answer 2

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

因为我看到'live example'这就是你所要求的

Answer 3

我认为您希望将body定义替换为css中的body, html，并将高度添加到pageHolder

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

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

CSS Column Divs需要帮助

3 个答案: