html - CSS Div动态内宽高

Question

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

外部 div 具有固定宽度和高度 但内部需要具有动态 100% 与其他内部相关 .尝试了位置绝对、相对宽度、高度自动和 100% 的多种可能性，但无法获得准确的结果。我确信有一种使用 CSS3 的简单而干净的方法。

分区边:

<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

为了获得您想要的结果，您的代码中需要进行许多更正。我尝试添加其中的几个来给你一个想法。

1. 从您的 div 中删除 position:absolute;。因为您希望它们相对于其他 div 定位。

2. 从中心 div 中删除 float:right;。

浏览更新后的代码。

    .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%;
    }

<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>

编辑:添加了 display: flex; 和 align-items: center; 以垂直对齐 .titlebar 中的元素/强>

希望这对您有所帮助。