Question

我无法让我的div正确布局。我想要一个200px高的顶杆，占据100％的宽度。在那下面是一个200px宽和100％高度的左侧栏，然后是一个右侧栏，占据了剩余的空间。

我在这里做错了什么？

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            height:200px;
            width:100%;
            position:relative;
        }

        #lb {
            background-color:#00cc00;
            width:200px;
            height:100%;
            float:left;
        }

        #rb {
            background-color:#cccccc;
            height:100%;
            float:right;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""/>
    <div id="lb"/>
    <div id="rb" style=""/>

</div>
</body>
</html>

当我在div中添加一些内容时看起来更糟糕：

<div id="tb" style="">test</div>
    <div id="lb">test</div>
    <div id="rb" style="">test</div>

Answer 1

height: 100%或width: 100%不是大小的其余部分，而是父级的整体大小，即整个文档。

Here是您想要使用表格的示例。

Here是div的例子。

Answer 2

如果你想要弹性布局，那么给你的包装div #page提供一些最小和最大宽度，那么你设计的顶部标题将根据父div #page的宽度来容纳。为你的包装div赋予高度不是一个好主意，但你可以使用min-height。

Answer 3

你不能将div设置为self close btw - ＆gt;这是你的一个例子http://jsfiddle.net/QHTeS/2/

#tb {
    background-color:#cc0000;
    height:200px;
    width:100%;
}

#lb{
    float: left;
    background:red;
    width:200px;

}

#rb{

    background:green
}

Answer 4

使用<div>和CSS（即不是表格） - 布局不会以这种方式工作。（另外，正如评论者所指出的，某些HTML无效）。

浮动元素的高度主要取决于其中的内容。你已经陷入了认为“高度”CSS声明意味着你所期望的意思的陷阱。（“忘掉你学到的东西”）

你必须接受普通的HTML / CSS流程，两个较低的div将是不同的高度。但是，您可以使用Faux Columns之类的假装效果

。

Answer 5

第一个div是对元素，所以<div></div>

使用div的流体布局有点棘手。

这应该适合你：

<!DOCTYPE html>
<html>
<head>
<title>my view</title>

<style>
    html, body {height: 100%;}
    #tb {
        background-color:#cc0000;
        height:200px;
        width:100%;
        position:relative;
    }

    #lb {
        background-color:#00cc00;
        width:200px;
        height:100%;
        float:left;
        margin-left: -200px;
    }

    #rb {
        background-color:#cccccc;
        height:100%;
        float:right;
        width: 100%;
    }

    #content {
        margin-left: 200px; 
        height: 100%;
    }
</style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="content">
       <div id="lb"></div>
       <div id="rb" style=""></div>
    </div>

</div>
</body>
</html>

Answer 6

要填充页面的精确部分，您需要使用绝对定位，因为百分比宽度/高度与父级的大小相关。

<!DOCTYPE html>
<html>
<head>
    <title>my view</title>

    <style>
        #tb {
            background-color:#cc0000;
            position:absolute;
            top:0px;
            left:0px;
            bottom:200px;
            right:0px;
        }

        #lb {
            background-color:#00cc00;
            position:absolute;
            top:200px;
            left:0px;
            bottom:0px;
            right:200px;
        }

        #rb {
            background-color:#cccccc;
            position:absolute;
            top: 200px;
            left:200px;
            bottom:0px;
            right:0px;
        }
    </style>

</head>
<body>
<div id="page" style="width:100%;height:100%">

    <div id="tb" style=""></div>
    <div id="lb"></div>
    <div id="rb" style=""></div>

</div>
</body>
</html>

无法正确安排div

6 个答案: