使内容div填充剩余高度 [英] make content div fill remaining height

问题描述

我有一个页面布局，其中我有一个固定标题，可以有任何高度和页脚位于页面的底部。我正在寻找一个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）？

jsfiddle

推荐答案

这里有一个不同的方法：

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 that a) for responsive purpose you had to know about the header height and adjust the padding of the section using media queries b) the same for the footer. Adjust the height of the push element and adjust the margin-bottom value.

jsFiddle

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