使内容 div 填充剩余高度。

Question

使内容 div 填充剩余高度。

3

我可以帮助您翻译这段关于页面布局的内容，其中包括一个可以任意高度的“fixed”头部和底部固定在页面底部的页脚。我正在寻找一种CSS解决方案，使内容div填充剩余空间（垂直）。在下面的jsfiddle中，我尝试过了这个问题，但是正如您所看到的，内容被遮盖在页脚后面。

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

- Jeanluca Scaljeri

你的布局是否具有响应式设计？ - Rakhat

是的，布局实际上是流动的。 - Jeanluca Scaljeri

4个回答

1

这里是一个不同的方法：

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”元素提供足够的空间来防止页脚和内容重叠。

通过填充，您的内容div现在放置在页脚下方。由于缺少内容，其高度实际上为0。在我的方法中，内容div始终适合插入的内容。

请记住： a）为了响应式目的，您需要知道标题的高度并使用媒体查询调整部分的填充 b）页脚也是如此。调整“push”元素的高度并调整margin-bottom值。 jsFiddle

- Steven Web

0

尝试将内容定位在页脚正上方。

bottom: <footer-height>;
position: absolute;

- JNF

如果我这样做，就无法得到一个填满整个空间的div（即使高度设置为100%也不行）。 - Jeanluca Scaljeri

0

我使用了这个tutorial创建了固定页脚。我认为它易于使用且方便。

CSS 代码

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML 代码

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

演示网址

- monsur.hoq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JohannesB · Accepted Answer

这是一个有些丑陋的解决方案，但是如果您将内容div的margin-top设置为-54px，并在其中添加一个padding-top：54px的div，则它将按预期工作。

HTML：

 <div class="content"><div class="contentwrapper"></div><div>

CSS：

.contentwrapper {
    padding-top:54px;
}
.content{
   background-color: #000; 
   height: 100%;
   margin-top:-54px;
}

小提琴：http://jsfiddle.net/dohqn8m4/1/

(原文保留了HTML标签)