html - 在父 div 中创建灵活的子 div

Question

这是我的三个 div。

<div class="header">
    <div>@ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>

这是我的 CSS。

<style type="text/css">
    html, body
    {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .header
    {
        height: 10%;
        width: 100%;
        background-color: whitesmoke;
        text-align: center;
    }
    .content
    {
        height: 80%;
        width: 100%;
        background-color: white;
    }
    .footer
    {
        height: 10%;
        width: 100%;
        background-color: whitesmoke;
    }
</style>

现在我希望我的父 Header div 中的子 div 是灵活的。每当我更改浏览器大小时，父标题 div 内的子 div 也会根据我的浏览器大小调整大小。并将留在标题 div 内。请帮忙。

Answer 1

.header div
    {
        height: 100%;
        width: 100%;
    }

将其用于子 div。

如果设置子 div 的宽度为 50%。它填充了父级的 50%。