我有一个容器DIV位置：相对。把所有东西都装在里面 然后一左一右一栏，古典布局。 它们都绝对定位在这个相对#Main 中。 我希望权利是流动的，所以我说 top: 0px;左：280 像素； （左列宽度） right: 0px 全部有效，但 Bottom:0px 不起作用。我说身高：100% 还是什么都没有。除底部外，它都卡在所有边缘上。该 div 的高度始终为 1px 或 0px。只有 px 值似乎有效，但那是不可用的。其原因何在？有线索吗？ 提前谢谢...
代码粘贴在下面
body {
margin: 0px;
}
#Main {
position: relative;
}
#LeftSection {
position: absolute;
width: 280px;
height: 100%;
}
#Logo {
position: absolute;
margin: 10px 0px 10px 30px;
}
#dvPanelMenu {
position: absolute;
top: 140px;
left: 0px;
width: 280px;
height: auto;
text-align: left;
}
#RightSection {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 280px;
background-color: Blue;
}
#dvContent {
position: absolute;
top: 36px;
left: 2px;
right: 0px;
bottom: 20px;
border: 1px dotted black;
}
#dvTopMenu {
position: absolute;
top: 0.4em;
left: 20px;
}
#dvLogin {
position: absolute;
right: 50px;
top: 0.4em;
font-family: Tahoma;
font-size: 11px;
text-align: left;
color: Teal;
}<div id="Main">
<div id="LeftSection">
<div id="Logo">
</div>
<div id="dvPanelMenu">
</div>
</div>
<div id="RightSection">
<div id="dvTopMenu">
</div>
<div id="dvLogin">
</div>
<div id="dvContent">
</div>
</div>
</div>按如下方式修改 #Main 和 #RightSection 选择器：
#Main {
margin: 0px;
height: 100%; /* added */
}
#RightSection {
position: absolute;
top: 0px;
right: 0px;
height: 100%; /* bottom: 0; replace by this */
left: 280px;
background-color: Blue;
}
我不一定建议以这种方式进行两列布局。浮动往往以跨浏览器的方式工作得更好。话虽如此，您似乎缺少的主要内容是 Main div 的高度。输入 100% 高度并尝试一下。
老实说，我尝试过绝对、相对和绝对+相对定位，但几乎总是因为某些浏览器上的某些问题或某些不太正确的东西而放弃它。
对于基于浮动的方法，请从类似的内容开始（适用于 Chrome 2、FF 3.5、IE8）：
<html>
<head>
<title>2 columns</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#Main { height: 100%; padding-left: 280px; }
#LeftSection { margin-left: -280px; width: 280px; height: 100%; background: yellow; float: left; }
#Logo { margin: 10px 0px 10px 30px; }
#dvPanelMenu { text-align: left; }
#RightSection { width: 100%; background: blue; height: 100%; min-height: 100%; padding-top: 70px; }
#dvTopMenu { float: left; margin: -65px 0 0 20px; height: 40px; background: red; width: 300px }
#dvLogin { float: right; margin: -65px 50px 0 0; font-family: Tahoma; font-size: 11px; text-align: left; background: green; height: 50px; width: 200px; }
#dvContent { border: 1px dotted black; width: 100%; border: 1px dotted black; background: orange; }
</style>
</head>
<body>
<div id="Main">
<div id="LeftSection">
<div id="Logo">Logo</div>
<div id="dvPanelMenu">dvPanelMenu</div>
</div>
<div id="RightSection">
<div id="dvTopMenu">dvTopMenu</div>
<div id="dvLogin">dvLogin</div>
<div id="dvContent">dvContent</div>
</div>
</div>
</body>
</html>