CSS 列 Div 需要帮助
我正在尝试构建一个页面布局，其中左列具有固定宽度和 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;
}
如果有人可以帮助我，那就太棒了:)
I am trying to construct a page layout, where the left column has a fixed width and a height of 100% (of whatever the right column is) and the right column has a fluid width. I've tried various ways of doing it, but can't seem to get it right..
Here's my code:
<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>
And my css is:
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;
}
If someone could help me out, that would be fantastic :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
试试这个：
**编辑：再想一想，如果你想保持相对位置，也许使用 maxwidth 和 maxheight 可以帮助你。
Try this out:
**Edit: On second thought perhaps using maxwidth and maxheight could do something to help you if you want to keep position: relative.
http://css-tricks.com/the-perfect-fluid-width -layout/
正如我看到的 'live example' 这就是你的正在要求
http://css-tricks.com/the-perfect-fluid-width-layout/
as i see the 'live example' this is what you're asking for
我相信你想用 css 中的
body, html替换你的body定义，并为pageHolder添加高度，但这很烦人因为无论里面的内容如何，您都会得到不必要的滚动条。这是您想要实现的目标吗？
I believe you want to replace your
bodydefinition withbody, htmlin your css, as well as add a height topageHolderIt's pretty annoying though because you will get unnecessary scrollbars regardless of the content inside. Is this what you are trying to achieve?