Question

我在CSS中可能有一个非常简单的问题我有像这样的元素：

+-----------+--+
|    A      | B|
+--+--------+--+
|  |           |
|  |           |
| C|     D     |
|  |           |
|  |           |
|  |           |
+--------------+

我希望C和D填充整个页面，标题除外。我尝试了各种各样的东西，已经发现了一些这样的问题，但没有一个问题令人满意。当我将它们设置为100％时，它们会占用太多空间。我可以使所有元素绝对并使用填充和z-index，但这不是我想要的。我是为元素A和B做的。我不喜欢这个，但它会适用于这些。但必须有办法实现以下目标：

答：在左上角，固定高度，到达元素B的可变长度

B：在右上角，固定高度，固定宽度

C：左侧，在元素A的正下方，固定宽度，填充空间直到结束（高度）

D：在C的右边，在A下面，填充空间到底部和右边

这正是我希望的样子。有人可以帮忙吗？

现在这是我的代码：

HTML：

<body>
    <div id="logo">
        <img src="pictures/logo1.png" alt="Logo von VIA e.V." width="171" height="100">
    </div>

    <div id="logout">
        Hallo
    </div>

    <div id="menu">
        Menu
    </div>

    <div id="mainWindow">
        mainWindow
    </div>
</body>

CSS：

*
{
    padding: 0px;
    margin: 0px;
}

#logo
{
    height: 100px;
    background-color: #CCCCCC;
    z-index: -1;
}

#logout
{
    width: 190px;
    height: 90px;
    background-color: #BFBFBF;
    right: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    padding: 5px;
}

#menu
{
    width: 161;
    background-color: grey;
    padding: 5px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    float: left;
}

#mainWindow
{
    padding: 5px;
    background-color: #E8E8E8;
}

使用Top Bar将css中的div填充到页面的末尾

0 个答案: