使内容div填充剩余高度

问题描述

我有一个页面布局，其中我有一个固定标题，可以有任何高度和页脚位于页面的底部。我正在寻找一个css解决方案，以便内容div填充剩余的空间（垂直）。在下面的jsfiddle我试图这样做，但是你可以看到内容是在页脚后面。

I have a page layout in which I have a fixed header which can have any height and a footer positioned at the bottom of the page. I'm looking for a css solution so that the content div fills the remaining space (vertically). In the jsfiddle below I've tried to do this, but as you can see the content is behind the footer.

HTML：

<main>
    <header>
        <ol>
            <li>bar</li>
            <li>foo</li>
        </ol>
    </header>
    <section>
        <div class="content"><div>
    </section>
    <footer></footer>
</main>

CSS：

header {
    background-color: #abc;
    z-index: 1000;
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
}

html, body, main, section {
    height: 100%;
    display: block;
}

.content{
   background-color: #000;
   height: 100%;
}

footer {
    background-color: #def;
    bottom: 0;
    display: block;
    height: 54px;
    position: absolute;
   width: 100%;

}

css（3）？

推荐答案

这里有一个不同的方法：

Here a diffrent approach:

HTML：

<header>
    <ol>
        <li>bar</li>
        <li>foo</li>
    </ol>
</header>
<main>
    <section>
        <div class="content"></div>
    </section>

    <div class="push"></div>
</main>
<footer></footer>

CSS：

    html, body {
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    header {
        background-color: #abc;
        z-index: 1000;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    main {
        min-height: 100%;
        height: auto !important;
        margin-bottom: -54px;
    }

    main > section{
        padding-top: 72px;
    }

    .content {
        background-color: #000;
    }

    .push {
        height: 54px;
    }

    footer {
        background-color: #def;
        height: 54px;
    }

现在页脚总是在底部，内容不填满孔页。在这种情况下，push元素提供足够的空间来拒绝页脚和内容的重叠。

Now the footer is always at the bottom aslong the content doesn't fill the hole page. In that case the "push" element provides enough space to deny overlapping of footer and content.

您的内容div ist现在通过填充放置在页脚下。高度实际上是0，因为缺少内容。在我的方法，内容div总是适合插入的内容。

Your content div ist now placed under the footer through the padding. The height is actually 0 because of missing content. In my approach the content div fits always the content inserted.

请记住
a）为响应的目的，你必须知道头的高度，并调整使用媒体查询的区段的填充
b）相同的页脚。调整推式元素的高度并调整页边距值。

Keep in mind thata) for responsive purpose you had to know about the header height and adjust the padding of the section using media queriesb) the same for the footer. Adjust the height of the push element and adjust the margin-bottom value.

这篇关于使内容div填充剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！