css - 我的居中布局不会延伸到页面底部 - HTML/CSS

Question

我正在设计的网站有一个居中的页面布局，并且我使用了 Ryan Fait 的 CSS Sticky Footer，但我似乎无法将我的内容div标签（div#container在下面的代码中）扩展到页脚。

这是我的 HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>MathExplained.com</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <link rel="icon" type="image/ico" href="https://www.iconfinder.com/icons/21328/download/png/24">
</head>

<body>

<div class="wrapper">

    <div id="headerbar"><div id="header">

        <h1><a href="index.html">MathExplained.com</a></h1>

        <div id="nav">

            <ul>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="archives.html">Archives</a></li>
                <li><a href="about.html">About</a></li>
            </ul>

        </div>

    </div></div>

    <img id="header-underline" src="files/header-underline.png" alt="" />

    <div id="container">

        <div id="contentmargin">

            <div class="post">

                <h2>What Pi Really Means</h2>
                <h3>5th September 2013</h3>

                <div class="post-content">

                    <iframe src="https://www.youtube.com/embed/yJ-HwrOpIps" allowfullscreen></iframe>

                    <p>Lorem ipsum dolor sit amet</p>

                </div>  

            </div>

        </div>

    </div>

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

</div>

<div class="footer">
    Designed by Riley Wheb <br />
    WhebDesigns 2013
</div>

</body>

</html>

...还有我的 CSS（这里是龙）：

* {
    margin: 0;
}

html,body {
    height: 100%;
}

body {
    background: url('files/bg2.gif');
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    margin: 0;
    padding: 0;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
}

div#headerbar {
    background: rgba(73,155,234,1);
    background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );
    margin: 0;
    padding: 0;
}

div#header {
    display: block;
    height: 38px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 750px;
}


    div#header > h1 {
        float: left;
        margin: 0;
        padding: 0;
        position: relative; top: -2px;
    }

        div#header > h1 > a:link, div#header > h1 > a:visited {
            color: white;
            font: 28px/35px "Lucida Console", monospace;
            text-decoration: none;
            text-shadow: -1px -1px 0 gray;
            vertical-align: middle;
        }

        div#header > h1 > a:hover, div#header > h1 > a:active {

        }


    div#nav {
        float: right;
        margin: 0;
        padding: 0;
    }

        div#nav > ul {
            height: 100%;
            list-style-type: none;
            margin: 0;
            overflow: hidden;
            padding: 0;
        }

            div#nav > ul > li {
                float: right;
                height: 100%;
                margin: 0;
                padding: 0;
                text-align: center;
                width: 150px;
            }

                div#nav > ul > li > a:link, div#nav > ul > li > a:visited {
                    color: white;
                    display: block;
                    font: 16px Verdana,sans-serif;
                    height: 100%;
                    margin: 0 25px;
                    padding: 10px 0;
                    text-decoration: none;
                    text-shadow: -1px -1px 0 gray;
                }

                div#nav > ul > li > a:hover, div#nav > ul > li > a:active {
                    background: -moz-linear-gradient(top,  rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 100%); /* FF3.6+ */
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0.25))); /* Chrome,Safari4+ */
                    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* Chrome10+,Safari5.1+ */
                    background: -o-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(top,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* IE10+ */
                    background: linear-gradient(to bottom,  rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* W3C */
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#40ffffff',GradientType=0 ); /* IE6-9 */
                }

img#header-underline {
    padding: 0; margin: 0;
    position: absolute;
    top: 38px;
    height: 4px;
}

div#container {

    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    border: 3px solid #D6D6D6;
    display: block;
    height: 100%;
    margin: 0 auto;
    width: 800px;
}

    div#contentmargin {
        padding: 20px 25px;
    }

    div.post {
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;

        border: 1px solid #BDBDBD;
        position: relative;
        margin: 0 0 60px 0;
        padding: 0 10px 20px 10px;
        overflow: hidden;
    }

        div.post > h2 {
            font: italic 24px/26px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
            letter-spacing: normal;
            margin: 15px 0 0 0; padding: 0;
        }

        div.post > div.post-content {
            clear: both;
        }

            div.post > div.post-content > p {
                font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
                padding: 5px 0;
            }

        div.post > h3 {
            font: italic 12px/14px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
            margin: 0 0 10px 0; padding: 0;
        }

iframe {
    width: 726px;
    height: 416px;
    border: 1px inset #BDBDBD;
}

.footer, .push {
    height: 35px; /* '.push' must be the same height as 'footer' */
}

div.footer {
    background: rgba(0,0,0,0.8);
    border-top: 2px solid black;
    color: gray;
    font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
    text-align: center;
    padding: 10px 0;
}

这是它现在的样子的屏幕截图。

这就是我想要实现的目标。

score 1 · Accepted Answer

有和.wrapper也。将被忽略，仅使用将。height: auto !important;100%100%!important

删除元素的auto !important高度.wrapper并调整页脚css。你也需要注意.wrapper边缘！

score 0 · Accepted Answer

更改CSS：

  div#contentmargin {
       padding: 20px 25px;
       height:100%
  }
  .wrapper {
       height: 100%;
  }

score 0 · Accepted Answer

您是否考虑过使用<header>,<main>和<footer>标签而不是当前的 div？它们会自动缩放并填充 100% 的屏幕。

css - 我的居中布局不会延伸到页面底部 - HTML/CSS

3 回答 3

Related

Reference