Question

我明确的预期输出是这样的： outer and inner div plan

Outer div有fixed width and height但内部需要dynamic 100% 与其他内容相关。尝试了位置绝对，相对宽度，高度自动和100％的许多可能性，但无法获得确切的结果。我确信使用 CSS3 进行简单而干净的方式。

Div方面：

<div class="window">
    <div class="titlebar">
        <div class="title">Text</div>
    </div>
    <div class="scroll_right"></div>
    <div class="window_inner"></div>
    <div class="scroll_bottom"></div>
</div>

风格方：

    .window {
        width: 400px;
        height: 400px;
        background-color: yellow;
        position: relative;
    }

    .titlebar {
        position: absolute;
        top: 0;
        background-color: black;
        color: white;
        height: 20px;
        width: 100%;
    }

    .scroll_right {
        position: absolute;
        float: right;
        width: 20px;
        height: 100%;
        background-color: blue;
    }

    .window_inner {
        background-color: red;
        width: 100%;
        height: 100%;
        float: right;
        position: absolute;
    }

    .scroll_bottom {
        background-color: black;
        position: absolute;
        bottom: 0;
        height: 20px;
        width: 100%;
    }

Answer 1

OuterDiv{
position :relativel
}
InnerDiv{
position :absolute
}

你可以阅读有助于你的灵活盒子。

使div更灵活

Answer 2

您的代码中需要对您所需的结果进行许多更正。我试过添加其中几个来给你一个想法。

从您的div中删除position:absolute;。因为您希望它们相对于其他div进行定位。
从中心div中删除float:right;。

浏览更新的代码。

＆＃13;

    .window {
        width: 400px;
        height: 400px;
        background-color: yellow;
        position: relative;
    }

    .title{
       color: #ddd;
     }

    .titlebar {
        top: 0;
        background-color: black;
        color: white;
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .scroll_right {
        float: right;
        width: 20px;
        height: 100%;
        background-color: blue;
    }

    .window_inner {
        background-color: red;
        width: 100%;
        height: 100%;
    }

    .scroll_bottom {
        background-color: black;
        bottom: 0;
        height: 20px;
        width: 100%;
    }

＆＃13;

<div class="window">
    <div class="titlebar">
        <div class="title">Vertically Centered Text</div>
    </div>
    <div class="scroll_right">
        <div class="scroll_top"></div>
        <div class="r_middle"></div>
        
    </div>
    <div class="window_inner"> </div>
    <div class="scroll_bottom">
        <div class="scroll_left"></div>
        <div class="b_middle"></div>
        <div class="scroll_right"></div>
    </div>
</div>

＆＃13;

修改：添加display: flex;和align-items: center;以垂直对齐.titlebar

希望得到这个帮助。

Answer 3

在scroll_bottom中，将位置从abs更改为rela 当你使用位置proparite预先使用flexbox而不是浮动时会更有效率

CSS Div动态内宽高度

3 个答案: