粘性页脚（未修复）隐藏主要内容

Question

也许我做错了（像往常一样sigh），但问题是，一旦内容一直向下，我就会将主要内容放在页脚后面。 虽然一旦内容开始填满，它就会通过向下推动页脚来完成我想要它做的事情......但它总是隐藏在页脚后面的一定数量的信息。是因为浮动/位置吗？

您可以从这个 codepen URL 中看到： http://codepen.io/anon/pen/ygGZNR

height: 200px;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid red;

页脚从红线处开始，你就看到了问题。

一个请求：我希望页脚现在具有相同的效果，在主窗口中保持固定，没有/很少内容，但一旦内容接近它就会被推下，谢谢男孩和女孩！

Answer 1

如下更新你的CSS

由position: absolute; 替换为position:relative;

#footer{
    /*background-image: url("../img/Me_footer.jpg");*/
    height: 200px;
    /*background-color: red;*/
    position:relative;
    width: 100%;
    border-top: 1px solid red;
}

Answer 2

我认为您可以使用一些弹性盒概念来实现您想要的。 首先，我强烈建议你看看FlexBox，然后你就会很容易理解我用来解决你问题的方法。

基本上，我所做的就是告诉main-content 占用尽可能多的空间，然后在它结束后放置页脚。这样做会有两个好处：

1. 您不需要使用绝对/固定定位，如果您想让您的网站具有响应性，这会给您带来麻烦。
2. 无论主要内容需要多少空间，页脚始终位于其上方。

在上面的示例中，我保留了所有 cmets，只是为了让您了解我删除的内容和添加的内容。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-image: url("../img/france.jpg");
  /* Background image from www.pixabay.com */
  /*"All images and videos on Pixabay are released free of copyrights under Creative Commons CC0." */
  background-repeat: no-repeat;
  background-size: cover;
  /*width: 100vw;*/
}
body {
  background-color: #a9a9a9;
  /*margin-bottom: 100px;*/
}
#wrapper {
  min-height: 100%;
  margin: 0 auto;
  width: 1000px;
  position: relative;
  background-color: #fff;
  /*border-left: 5px solid #313131;*/
  /*border-right: 5px solid #313131;*/
}
#header {
  height: 200px;
  background-image: url("../img/Me.jpg");
}
#footer {
  /*background-image: url("../img/Me_footer.jpg");*/
  display: inline-block;
  height: 200px;
  background-color: red;
  /*position: absolute;*/
  width: 100%;
  /*bottom: 0;*/
  /*left: 0;*/
  border-top: 1px solid red;
}
#home,
#om_mig,
#histernet,
#integnet {
  width: 200px;
  float: left;
  border-top: 1px solid #313131;
  border-left: 1px solid #313131;
  border-right: 1px solid #313131;
  margin: 10px 0 0 38.4px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
  padding: 10px 0;
}
span {
  font-size: 20px;
  font-weight: bolder;
}
#main_content {
  padding: 20px;
  background-color: green;
  border-top: 5px solid #313131;
  display: flex;
  flex-direction: column;
  /*height: calc(100% - 200px);*/
}
.active {
  background-color: yellow;
  -webkit-box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
}
.inactive {
  background-color: lightgrey;
  -webkit-box-shadow: inset 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
  box-shadow: 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
}
#clear,
#footer {
  clear: both;
  /*bottom: 100px;*/
}

<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <a href="#">
      <div id="home" class="active">
        <span id="nav_text">Home</span>
      </div>
    </a>
    <a href="#">
      <div id="om_mig" class="inactive">
        <span id="nav_text">About</span>
      </div>
    </a>
    <a href="#">
      <div id="histernet" class="inactive">
        <span id="nav_text">Internet</span>
      </div>
    </a>
    <a href="#">
      <div id="integnet" class="inactive">
        <span id="nav_text">Ethics</span>
      </div>
    </a>

    <div id="clear"></div>

    <div id="main_content">Main content
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
    </div>
  </div>
  <!-- content -->
  <div id="footer">Footer</div>
</div>
<!-- wrapper -->

Answer 3

您可以添加：

#content {
  padding-bottom: 200px;
}

基本上抵消了页脚的高度。

http://codepen.io/sol_b/pen/QdzYvV