Question

我有一个html结构，如： -

<body>
    <div class="header">header</div>
    <div class="content">
        hello
    </div>
    <div class="footer">footer</div>
</body>

它的应用风格是： -

<style>
        body {
            padding: 0px !important;
            margin: 0px !important;
        }
        .header {
            height: 30px;
            background: gray;
        }
        .footer {
            height: 30px;
            background: green;
            position: fixed;
            bottom: 0px;
            width: 100%;
        }
        .content{
            background: yellow;
        }


    </style>

我想要的是，内容div的高度将等于窗口的整个高度，除了标题＆amp;页脚部分。目前我只看到内容部分的一个小黄色条带，因为其中的文本非常小，页面的其余部分是白色的。我想，内容div将占据那个地方。我尝试使用身高：100％;在内容div中，但它没有用。请帮忙。

Answer 1

尝试修改内容类，如： -

     .content{
            background: yellow;
            position: fixed;
            width: 100%;
            top: 30px;
            bottom: 30px;
        }

顶部和底部为30px，因为页眉和页脚的高度为30px。它会为你工作。

Answer 2

尝试制作div class =＆＃34; wrapper＆＃34;围绕你的div class =＆＃34; content＆＃34; ...在css中给.wrapper 100％的宽度和高度。我希望有所帮助。

根据窗口高度更改div高度

2 个答案: