Question

我有以下HTML代码段：

<body>
    <div class="main">

        <div class="topBar">
            <p>testing</p>
        </div>

        <div class="content">

            <div class="broadcastBar">
                <p>testing</p>
            </div>

            <div class="mainBody">
                <p>more testing</p>
            </div>

        </div>

    </div>    
</body>

这是我的CSS：

div.main {

}

div.topBar {
    background-color: Black;
    color: White;
    height: 50px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

div.broadcastBar {
    background-color: Gray;
    width: 300px;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
}

div.content {
    background-color: Yellow;
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0px;
    height: 100%;
}

我的问题是这个。正如您可以通过标记和CSS看到的那样，我试图让div成为屏幕的各个部分。但由于<div class="content" />的{{1}}为position，因此会导致div在浏览器窗口下方推动absolute（这与{{1}相关}}）。

我已经尝试过这样做，50px topBar不必是位置content，但是所有内容都只是将div推到了周围absolute边缘不再相互冲洗或浏览器窗口。

我知道我能做些什么来缓解我的问题？

编辑

添加了所需的输出：此屏幕截图是目前上述标记和CSS呈现的内容。这就是我想要的（大多数情况下，没有扩展/滚动条效果）。我希望我的div互相冲洗并与浏览器窗口进行冲突。

如果不通过div定位，最好的方法是什么？

enter image description here

Answer 1

您要学习的是使用 float 的一些标准格式化实践。

使用绝对来定位你的元素将长期伤害你。如果你的所有元素都使用浮动，你将能够更好地控制它们的外观。

例如：

div.topBar {
    background-color: Black;
    color: White;
    height: 20%;
    width: 100%;
    float: left;
}

div.broadcastBar {
    background-color: Gray;
    width: 70%;
    height: 80%;
    float: left;
}

div.content {
    background-color: Yellow;
    width: 30%;
    height: 80%;
    float: left;
}

@EDIT：

所以你有3个div，你会想要按顺序堆叠它们。

<div class="header">headerdiv</div>
<div class="left">leftdiv</div>
<div class="right">rightdiv</div>

Float遵循这个序列，因此通过使用这些属性，基于空间限制，元素将被迫逐个落下：

div.header {
    background-color: Black;
    color: White;
    height: 20%;
    width: 100%;
    float: left;
}

div.left {
    background-color: Gray;
    height: 80%;
    width: 70%;
    float: left;
}

div.right {
    background-color: Yellow;
    height: 80%;        
    width: 30%;
    float: left;
}

@QUESTION：

因此，如果您需要使用像素测量，那么您需要将所有元素封装在另一个容器中，并使用 max width and height 布局。

<div class="container">
    <div class="header">headerdiv</div>
    <div class="left">leftdiv</div>
    <div class="right">rightdiv</div>
</div>

div.container{
    height: 100px;
    width: 100px;
    float: left;
}

div.header {
    background-color: Black;
    color: White;
    height: 20px;
    width: 100px;
    float: left;
}

div.left {
    background-color: Gray;
    height: 80px;
    width: 70px;
    float: left;
}

div.right {
    background-color: Yellow;
    height: 80px;        
    width: 30px;
    float: left;
}

Div布局问题与定位

编辑

1 个答案:

例如：

@EDIT：

@QUESTION：