具有絕對定位內容的頁腳定位

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