如果内容太长，我的页脚不会停留在底部答案

【问题标题】：My footer won't stay at the bottom if the content gets too long如果内容太长，我的页脚不会停留在底部
【发布时间】：2016-04-26 15:32:47
【问题描述】：

所以我一直在互联网上四处寻找解决方案，以使页脚保持在页面的最底部，而不管页面内容的长度如何。我按照教程中的CSS，如果内容不够长，页脚只会在页面底部，如果内容太长，页面会得到滚动条，页脚会卡在中间向下滚动页面以获取更多内容。下面是我的 CSS 和 HTML。

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:absolute;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}


Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
    <html>
    <body>
    <div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>
    </body>

</html>

【问题讨论】：

标签： html css footer absolute

【解决方案1】：

尝试在上面的 Css 代码中使用这个

<div style="width: 100%;height: auto;border:1px solid red;float:left;">
            <div style="width: 100%;height: auto;border:1px solid green;float:left;">

            </div>
            <div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">

            </div>
        </div>

【讨论】：

【解决方案2】：

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:fixed;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}

<div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>

把#footer改成

position:fixed;

【讨论】：

。我不希望它被修复。我希望它是动态的并保持在底部并适应页面内容的长度。固定不解决。
@SemiM 你在开玩笑吧，你有“解决方案，以使页脚保持在页面的最底部，而不管页面内容的长度如何。”有问题，你认为这实际上是什么意思。现在你不希望它处于最底层
FIXED 无论如何都会让它保持在原来的位置。如果我的内容需要向下滚动页面以获取更多内容，我希望页脚仍留在最底部。
非常感谢！那规则变了吗？因为我发誓，我在网上看到的所有有粘性页脚的教程都表明你需要将它包含在具有相对位置的包装器中，然后添加具有绝对位置和底部 0px 的页脚
喜欢这个...matthewjamestaylor.com/blog/…

【解决方案3】：

请试试这个 css 并查看小提琴链接：

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
  background: #0000ff none repeat scroll 0 0;
  height: 1300px;
  left: 20%;
  position: relative;
  width: 1024px;
}

.container {
  background: #0000ff none repeat scroll 0 0;
  height: 86px;
  left: 20%;
  margin-bottom: 3%;
  max-height: 300px;
  position: relative;
  top: 0;
  width: 1024px;
}

#footer {
  background: #f2f2f2 none repeat scroll 0 0;
  bottom: 0;
  color: #000099;
  height: 100px;
  left: 0;
  max-height: 900px;
  position: absolute;
  width: 100%;
}

https://jsfiddle.net/tn30t1k7/2/

否则你可以参考这个链接：

http://www.cssstickyfooter.com/

【讨论】：

我的 CSS 出了什么问题？我遵循了在线教程，该教程指示将页脚绝对定位在具有 min-height:100% 相对位置的包装器内......我哪里出错了？
try 的变化非常小，重新定位类 .wrapper 和 .country-container 删除绝对位置并放置相对位置。

【解决方案4】：

<body>
    <section class="wrapper">
        <main class="content">
            content
        </main>

        <footer class="footer">
            footer
        </footer>
    </section>
</body>


html {
   position: relative;
   min-height: 100%;
}

body{
  margin: 0 0 60px 0;
}

/* don't do that */
/*  .wrapper {
  position: relative;
}  */

.content {
  background: green;
  height: 200px;
  /* height: 700px; */
}

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

这个https://jsfiddle.net/zkto8o88/2/怎么样。

.footer 类将搜索最近的具有相对位置的父级，在这种情况下是 html 标记。

如果 .wrapper 类具有相对位置属性，那么它将不起作用。

【讨论】：

但 wrapper 是我的问题中位置相对最近的父级.. 那怎么不起作用？
被绝对定位，他们不能决定他们的父母身高。所以 .wrapper 上的最小高度是没用的。只需从容器中删除绝对位置。如果您想要它们之间的空间，请给它们底部边距。您尝试如何创建 html 是一个问题。
维克多，非常感谢！我将尝试您的示例，看看它是如何工作的。所以基本上子容器的绝对位置不尊重包装父的相对位置。为了让他们尊重它，需要从容器中删除绝对位置。我试试这个
有一个问题，虽然我的例子你修复了。如果我选择让页脚的高度大于 100px。假设 600px，第二个容器的一部分（如果高度更大，国家容器将与大页脚重叠，而不是页脚不与第二个容器重叠。我的网站可能需要一个带有很多链接的更大页脚，我会仍然希望两个大的内容容器不重叠。如果您使用我修复的示例将页脚高度设为 500 像素，您将如何解决这个问题？