0

我有一个带有页眉、页脚和文章标签的简单页面。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;
        }

我正在尝试使其流畅，例如：

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

请建议，在这种情况下如何使文本居中并使页面流畅（没有垂直滚动条）。

4

1 回答 1

3

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

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

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

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

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

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

    display: flex;
    flex-direction: column;
}

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

article {
    flex: 1;
}

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

article {
    flex: 1;

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

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

于 2013-06-01T19:13:09.827 回答