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

Question

我在http://codepen.io/anon/pen/vNVMRE制作了一个Codepen

我知道如何制作页脚。 但是，在我的情况下，我的内容（.moveDown）需要定位为绝对位置，因为页脚不会停留在底部。 您可以在代码笔中检查。 如果将窗口缩小直到有滚动条，则页脚将在内容上方移动并停留在新位置； 当然，我可以通过将第40和41行的代码更改为.movedown div

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技巧中有一个很好的解释，您可以在其中看到不同之处。

请参见下面的示例：

 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 个解决方案

解决方案1
0 2015-11-09 17:51:02

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

问题描述

1 个解决方案

解决方案1 0 2015-11-09 17:51:02

解决方案1
0 2015-11-09 17:51:02