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

Answer 2

不要为标题元素设置高度！

在处理响应式设计时，尽量避免设置高度。如果确实需要设置高度，请在子元素上执行此操作，然后强制标题具有其子元素的高度。

Answer 3

在你的css中使用它

display-inline:block:

在父div中创建灵活的子div

3 个答案: