Question

我有一个带页眉，页脚和文章标签的简单页面。 http://jsfiddle.net/6fmxv/

HTML：

<header>
    <div class="social">
        <a class="facebook-logo" href="http://www.facebook.com/">
            <div id="facebook"></div>
        </a>
        <a class="youtube-logo" href="http://www.youtube.com/">
            <div id="youtube"></div>
        </a>
        <a class="twitter-logo" href="http://www.twitter.com/">
            <div id="twitter"></div>
        </a>
    </div>
</header>
<article>
    <div>Question: Who are you?</div>
</article>
<footer>
    <div>
       <span></span>
    <div>
</footer>

CSS：

    html, body {
        height: 100%;
        margin: 0;
    }

    header {
        height: 24px;
        background-color: rgb(19, 147, 107);
    }

        header .social {
            padding-left: 19%;
        }

            header .social > a > div, footer > div > span {
                margin: 0 12px;
                float: left;
                height: 71px;
                width: 50px;
                background-image: url(sprites.png);
            }

                header .social > a > div#facebook {
                    background-position: -116px -141px;
                }

                header .social > a > div#youtube {
                    background-position: -62px -141px;
                }

                header .social > a > div#twitter {
                    background-position: -9px -141px;
                }

    article {
        width: 300px;
        min-height: 100%;
        margin: 0 auto;
    }


        article > div {
            font-size: 3em;
            padding-bottom: 150px;
        }

    footer {
        background-color: black;
        height: 150px;
        position: relative;
        margin-top: -150px; /* negative value of footer height */
        clear: both;
    }

        footer > div > span {
            background-position: 147px -138px;
            height: 133px;
            width: 138px;
        }

我试图让它变得流畅，这样：

标题贴在上面完成
底部的页脚完成
即使调整浏览器窗口大小，也没有滚动条。 未完成
页面中心的文章（一行）。 未完成

请注意，在这种情况下，如何在中间制作文本并使页面流畅（没有垂直滚动条）。

Answer 1

您需要哪些浏览器支持？如果你可以放弃IE9及以下版本，你可以使用flexbox：

http://jsfiddle.net/6fmxv/2/

您需要许多不同的语法才能获得跨浏览器支持，但这很简单。

我不会在这里包含不同的语法，但您可以查看源代码。

首先，您需要在主体上启用flexbox，然后告诉它使用垂直方向：

body {
    height: 100%;
    width: 100%; /* fixes bug in Firefox */
    margin: 0;

    display: flex;
    flex-direction: column;
}

然后你需要告诉文章灵活调整其大小以占用剩余空间：

article {
    flex: 1;
}

现在你只需要将文章集中在一起。您需要将article设置为flexbox容器，然后您可以将以下声明添加到文章规则中，以内联方向（水平）和块方向（垂直）为中心：

article {
    flex: 1;

    display: flex;         
    align-items: center;
    justify-content: center;
}

你需要把文章作为一个容器，如果你以body元素为中心，它也会使页眉和页脚居中。

HTML5：粘性页脚，标题和文章

1 个答案: