Question

制作了一个代码

我知道如何制作粘性页脚。但是，在我的情况下，我的内容（.moveDown）需要定位为绝对，因为页脚不会粘在底部。你可以在codepen中检查一下。如果你使窗口变小，直到你有滚动条，页脚移动内容并保持在新的位置; 当然，我可以通过更改第40行和第40行的代码来使.movedown div相对。 41到

position: relative;
top: 0;

然后我的移动版本出现了问题。我制作了简化版@ http://lettherobots.be/test2/ 正如您所看到的，页脚工作直到有滚动条。

如果您将窗口缩放到最大尺寸460，那么可以通过汉堡包访问垂直菜单。如果我使内容包装器（.moveDown）的位置相对，那么我的垂直导航中的链接将变为非活动状态。我尝试用z-index修复它，但这并没有解决问题。

知道如何解决这个问题吗？即使页面内容

，如何在文档的末尾显示页脚

部分代码： HTML：

<body>
<div class="container">
  <div class="navContainer">
    <nav class="horizontalNav">
      ....
    </nav>

    <nav class="verticalNav" id="verticalMenu">
      ...
    </nav>
  </div>

  <div class="content moveDown clearfix">
    <header>
      <img src="images/headerPic.jpg" alt="Header picture">
    </header>
    <div class="htmlWrapper">
      {$importedContent}
    </div>
  </div>

<footer>bla bla</footer>
</div>

CSS

.moveDown {
 left: 0;
 margin: 0 auto;
 padding: 0;
 position: absolute;
 right: 0;
 top: 60px;
 width: 100%;
 z-index: -2;
 -webkit-transition: top 300ms ease;
 -moz-transition: top 300ms ease;
 -o-transition: top 300ms ease;
 -ms-transition: top 300ms ease;
 transition: top 300ms ease;
}

Answer 1

您不能只使用position：absolute，因为绝对元素是根据第一个父相对元素定位的。你可以修复一些div的底部，但它是静态的，所以它不能根据滚动移动。在CSS-tricks有一个很好的解释，你可以看到这种差异。

请参阅以下示例：

html{
  height: 100%;
  
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

html {
  height: 100%;
}

.clearfix::after,
section::after,
header::after,
footer::after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

.container {
  min-height: 100%;
  position: relative;
}

.navHorizontal {
  height: 60px;
  text-align: right;
  background-color: #eee;
}

nav.navHorizontal a {
  display: inline-block;
}

.content {
  padding-bottom: 100px;
  position: absolute;
  top:60px;
  width: 100%;
}

header img {
  width: 100%;
  height: 100px;
}

footer {
  background-color: #ddd;
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
}

<div class="container">
  <div class="navContainer">
    <nav class="navHorizontal">
      <section>
        <div class="linkSection">
          <a href="#">Home</a>
          <a href="#">Portfolio</a>
          <a href="#">Tutorials</a>
          <a href="#">Contact</a>
        </div>
      </section>
    </nav>
  </div>

  <div class="content clearfix">
    <header>
      <img src="http://placehold.it/200x100">
    </header>
    <div>
      <h1>Some text here</h1>
    </div>
    <div>
      Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
      Phasellus fringilla posuere urna, ut porttitor nisi.
    </div>
    <div>
      Aliquam hendrerit at est sit amet imperdiet. Etiam nisi eros, sollicitudin ac ligula a, dignissim gravida purus. Mauris non lectus id ex ultricies iaculis nec nec magna. Praesent maximus eleifend sapien. Nunc lobortis ante id leo faucibus ullamcorper.
      Phasellus fringilla posuere urna, ut porttitor nisi.
    </div>
    
    
  <footer>Footer Content</footer>
    
  </div>
  
  
</div>

页脚定位具有绝对定位的内容

1 个答案: