Question

试图弄清楚为什么我无法将页脚放到页面底部（当“最新”文章在3x2网格中时）。我在这里发布了我的所有HTML和CSS，因为我不确定问题的具体位置。

这是我的HTML：

<html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
  <title></title>
</head>
<body>
  <div id="container">
    <header>
    </header>
    <div id="containerLarge">
      <h1 class="heading">
      </h1>
      <article id="featured">
        <div class="button">
        </div>
      </article>
      <h1 class="heading">
      </h1>
      <div class="containerMedium">
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
      </div>
    </div>
    <footer>
    </footer>
  </div>
</body>
</html>

我认为问题出在这里可能是“containerMedium”和“最新”类。

这是我的CSS：

/*CSS RESET*/

html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*CSS RESET*/

html, body{
    height:100%;
}

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    height: 75%;
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

#featured{
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    height: 300px;
    width: 600px;
    background-color: royalblue;
}

.button{
    display: inline-block;
    margin-right: 30px;
    margin-top: 220px;
    height: 50px;
    width:200px;
    background-color: gold;
    border-radius: 25px;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 600px;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

感谢您的帮助！

约什

Answer 1

夫妻俩。 1）包含containerlarge的{{1}} div在其上有高度。不需要摆脱它。 2）您的页脚具有绝对定位，但没有相对容器，导致它覆盖在元素的顶部。任何position属性都完全忽略了文档的常规流程。我更新了你的代码。

HTML

＆＃13;

footer

＆＃13;

/*CSS RESET*/

html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*CSS RESET*/

html, body{
    height:100%;
}

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

#featured{
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    height: 300px;
    width: 600px;
    background-color: royalblue;
}

.button{
    display: inline-block;
    margin-right: 30px;
    margin-top: 220px;
    height: 50px;
    width:200px;
    background-color: gold;
    border-radius: 25px;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

＆＃13;

Answer 2

这都是因为你内心元素的高度。在渲染容器和文章元素的像素高度之前，浏览器计算100％高度，它们大于屏幕的实际100％高度。

将你的message移到id =“容器”之外（确切地说：在“容器”下方）div并删除页脚的css中的绝对位置，它将正常工作。

Answer 3

如果您希望浏览器屏幕底部的footer保留在那里，那么页脚的CSS就是：

footer{
position: fixed; /* Instead of 'absolute' */
bottom: 0px;
height: 100px;
width: 100%;
background-color: deeppink;
}

如果您希望footer位于页面底部，那么footer的CSS就像这样：

footer {
height: 100px;
width: 100%;
background-color: deeppink;
}

固定footer看起来像这样：

＆＃13;

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    height: 75%;
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 600px;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    position: fixed;
    bottom: 0px;
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

＆＃13;

  <div id="container">
    <header>
    This is the header
    </header>
    <div id="containerLarge">
      <h1 class="heading">
      Content Start
      </h1>
      <div class="containerMedium">
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
      </div>
    </div>
    <footer>
    Fixed footer
    </footer>
  </div>
</body>
</html>

＆＃13;

为什么我的页脚不会停留在页面底部？

3 个答案: