CSS-P 噩梦

Question

我有一个容器 DIV position:relative。容纳一切然后一左一栏，一右一栏，经典布局。它们都绝对定位在这个相对#Main 中。我希望权利是流动的，所以我说 top: 0px;左:280px； (左栏宽) right: 0px 都有效，但 bottom:0px 无效。我说 height: 100% 仍然没有。它捕捉到除底部以外的所有边缘。该 div 的高度始终为 1px 或 0px。只有 px 值似乎有效，但那是不可用的。这是什么原因？任何线索？提前谢谢...

代码贴在下面

HTML:

<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>  

CSS:

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;
    }

Answer 1

如下修改您的#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;
}

我还建议阅读此 http://www.webmasterworld.com/forum83/200.htm