Question

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

这是我的HTML：

div#container

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

<!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>

Here's a screenshot of what it looks like now.

And here's what I would like to achieve.

Answer 1

.wrapper有height: auto !important;和100%。 {1}}将被忽略，只会使用100%。

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

Answer 2

更改css：

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

Answer 3

您是否考虑过使用<header>，<main>和<footer>代码而不是当前的div？它们将自动缩放并填充100％的屏幕。

我的居中布局不会扩展到页面底部 - HTML / CSS

3 个答案: