CSS-P 噩梦答案

【问题标题】：CSS-P nightmareCSS-P 噩梦
【发布时间】：2010-11-13 16:11:20
【问题描述】：

我有一个容器 DIV 位置：相对。把所有东西都装在里面然后一左一右一栏，经典布局。它们都绝对定位在这个相对的#Main 中。我希望权利是流动的，所以我说 top: 0px;左：280px；（左列宽） right: 0px 都可以，但是 bottom:0px 不起作用。我说身高：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;
    }

【问题讨论】：

标签： css height

【解决方案1】：

我不一定建议以这种方式进行两列布局。浮动往往以跨浏览器的方式工作得更好。话虽如此，您似乎缺少的主要内容是 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>

【讨论】：

【解决方案2】：

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

【讨论】：

我试过浮动但没有用。我应该使用定位还是根本不使用浮点数？
当你使用浮动时，你不应该使用绝对定位。但是为了使浮动正确渲染，有必要明确设置它们的宽度。这是一个易于掌握的 css 定位教程 - barelyfitz.com/screencast/html-training/css/positioning
如果您使用固定宽度（非流动布局），绝对定位是完全可以接受的。