Question

我有一个容器DIV位置：亲戚。抓住一切然后左列一列右列，经典布局。它们都绝对位于这个相对的#Main中。我想要流畅的权利所以我说顶部：0px;左：280px; （左列宽度）右：0px全部工作但底部：0px不起作用。我说高度：100％仍然没有。除了底部之外，它会捕捉到所有边缘。该div的高度始终为1px或0px。只有px值似乎可以工作，但这将无法使用。这是什么原因？任何线索？ thx提前...

代码粘贴在

下面

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

我不一定建议以这种方式进行两列布局。浮点数往往以跨浏览器的方式更好地工作。话虽这么说，你似乎缺少的主要是你的主要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>

Answer 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-P噩梦

HTML：

CSS：

2 个答案: