Question

也许我犯了错误的东西（像往常一样叹息），但问题是，一旦内容完全失败，我就会在我的页脚后面获取主要内容。虽然内容开始填满时通过向下推页脚来完成我想要的操作......但它有一定量的信息总是隐藏在页脚后面。是因为花车/位置？

您可以从此codepen网址中看到： http://codepen.io/anon/pen/ygGZNR

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

页脚从红线所在的位置开始，您会看到问题。

请求：我希望页脚现在具有相同的效果，在主窗口中保持固定不带/小内容，但是一旦内容接近它就被推下来，谢谢男孩们n女孩！

Answer 1

您可以添加：

#content {
  padding-bottom: 200px;
}

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

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

Answer 2

按如下方式更新您的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 3

我认为你可以使用一些弹性盒概念来达到你想要的效果。首先，我强烈建议您查看FlexBox，之后您将很容易理解我用来解决您的问题。

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

您不需要使用绝对/固定定位，如果您想让您的网站响应，会给您带来麻烦。
主要内容需要多少空间并不重要，页脚总是高于它。

在上面的示例中，我留下了所有评论，只是为了让您了解我删除的内容以及我已添加的内容。

＆＃13;

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;*/
}

＆＃13;

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

＆＃13;

粘滞页脚（不固定）隐藏主要内容

3 个答案: