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

Question

I've made a codepen at http://codepen.io/anon/pen/vNVMRE 我在http://codepen.io/anon/pen/vNVMRE制作了一个Codepen

I know how to make a sticky footer. 我知道如何制作页脚。 However, in my case my content (.moveDown) needs to be positioned absolute, because of that the footer doesn't stick at the bottom. 但是，在我的情况下，我的内容（.moveDown）需要定位为绝对位置，因为页脚不会停留在底部。 You can check that in the codepen. 您可以在代码笔中检查。 If you make the window smaller until you have scroll bars, the footer moves over the content and stays in the new position; 如果将窗口缩小直到有滚动条，则页脚将在内容上方移动并停留在新位置； Of course I could make the .movedown div relative by changing the code on line 40 & 41 to 当然，我可以通过将第40和41行的代码更改为.movedown div

position: relative;
top: 0;

But then my mobile version gets problems. 但是后来我的手机版本出现了问题。 I have made a simplified version @ http://lettherobots.be/test2/ As you can see, the footer works until there's a scroll bar. 我已经做了一个简化的版本@ http://lettherobots.be/test2/如您所见，页脚一直工作到有滚动条为止。

If you scale the window to max-size 460 there's a vertical menu which can be accessed through the hamburger. 如果将窗口缩放到最大尺寸460，则可以通过汉堡包访问垂直菜单。 If I make the position of the content wrapper (.moveDown) relative, then the links in my vertical navigation become inactive. 如果将内容包装器（.moveDown）的位置设为相对位置，则垂直导航中的链接将变为非活动状态。 I have tried fixing that with z-index, but that didn't solve the problem. 我曾尝试使用z-index修复该问题，但这并不能解决问题。

Any idea how I can get this fixed? 知道如何解决这个问题吗？ How I can get a footer at the end of my documents even if the content of the page 即使页面内容如何，也可以在文档末尾找到页脚

Some of the code: Html: 一些代码：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 的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

You can't stick only with position:absolute, because absolute elements is positioned according to first parent relative element. 您不能只坚持position：absolute，因为绝对元素是根据第一个父相对元素定位的。 You can fix at the bottom of some div, but it is static, so it can't move according to scroll. 您可以在某个div的底部进行修复，但它是静态的，因此无法根据滚动方向进行移动。 There is an excelent explanation at CSS-tricks where you can see this differentes. CSS技巧中有一个很好的解释，您可以在其中看到不同之处。

See this example below: 请参见下面的示例：

 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