如何讓這個列表停留在頁面底部？

希望這是我的頁面底部。它下面沒有空白。我有點困惑，因爲正常的CSS讓文本留在底部不會在這裏工作。如何讓這個列表停留在頁面底部？

.footer li{ 
 
     display:inline; 
 
    }

<footer> 
 
    <div class="footer"> 
 
    <ul style="float:left;list-style-type:none;"> 
 
      <li>Advertising</li> 
 
      <li>Business</li> 
 
      <li>About</li> 
 
     </ul> 
 
    
 
     <ul style="float:right;list-style-type:none;"> 
 
      <li>Privacy</li> 
 
      <li>Terms</li> 
 
      <li>Settings</li> 
 
     </ul> 
 
    </div> 
 
    </footer>

來源

2017-07-03 Jacob Moore

您希望它始終位於窗口的底部（當您滾動時，它保持固定），或者始終位於頁面底部，因此如果頁面很高，您仍然需要向下滾動以查看它？ –

就在底部，不一定要修復。 –

這應該這樣做。使用position: fixed;修復頁腳並設置bottom: 0px;將其修復到頁面底部。

.footer { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width:90%; 
 
} 
 

 
.footer li{ 
 
    display:inline; 
 
}


 
    <p>Some text here</p> 
 
    <footer> 
 
    <div class="footer"> 
 
    <ul style="float:left; list-style-type:none;"> 
 
      <li>Advertising</li> 
 
      <li>Business</li> 
 
      <li>About</li> 
 
     </ul> 
 
    
 
     <ul style="float:right;list-style-type:none;"> 
 
      <li>Privacy</li> 
 
      <li>Terms</li> 
 
      <li>Settings</li> 
 
     </ul> 
 
    </div> 
 
    </footer>

來源

2017-07-03 23:04:09

這在我在這裏運行時有效。但是當我更改我的源代碼時，他們現在都在左側。它不是正確的。 –

@JacobMoore固定。應該設置寬度。我也改變了'display：block;' –

我不得不將塊改回內聯，但它工作。謝謝。我明白這是如何工作的，只是混淆了塊，內聯，內聯塊... –

什麼你要找的是一個「粘」的頁腳，因爲你不希望它固定到視所有的時間的底部，只是希望它永遠位於頁面的底部。

最簡單/最現代的方法是使用一個flex容器並將footer設置爲margin-top: auto，以便它將自己推到容器的底部。將容器設置爲min-height: 100vh;，並且footer將始終位於頁面的底部。

.footer li{ 
 
    display:inline; 
 
} 
 
body { 
 
display: flex; 
 
flex-direction: column; 
 
margin: 0; 
 
min-height: 100vh; 
 
} 
 
footer { 
 
margin-top: auto; 
 
}

<nav>nav</nav> 
 
<main>main</main> 
 
<footer> 
 
    <div class="footer"> 
 
    <ul style="float:left;list-style-type:none;"> 
 
      <li>Advertising</li> 
 
      <li>Business</li> 
 
      <li>About</li> 
 
     </ul> 
 
    
 
     <ul style="float:right;list-style-type:none;"> 
 
      <li>Privacy</li> 
 
      <li>Terms</li> 
 
      <li>Settings</li> 
 
     </ul> 
 
    </div> 
 
</footer>

另一種方式來做到這一點是分配height到footer，絕對是在窗口的底部位置，並添加padding到body的footer

的高度一致

.footer li{ 
 
    display:inline; 
 
} 
 
body { 
 
box-sizing: border-box; 
 
padding-bottom: 50px; 
 
margin: 0; 
 
min-height: 100vh; 
 
position: relative; 
 
} 
 
footer { 
 
height: 50px; 
 
position: absolute; 
 
bottom: 0; left; 0; right: 0; 
 
}

<nav>nav</nav> 
 
<main>main</main> 
 
<footer> 
 
    <div class="footer"> 
 
    <ul style="float:left;list-style-type:none;"> 
 
      <li>Advertising</li> 
 
      <li>Business</li> 
 
      <li>About</li> 
 
     </ul> 
 
    
 
     <ul style="float:right;list-style-type:none;"> 
 
      <li>Privacy</li> 
 
      <li>Terms</li> 
 
      <li>Settings</li> 
 
     </ul> 
 
    </div> 
 
</footer>

來源

2017-07-03 23:26:45

如何讓這個列表停留在頁面底部？

回答

相關問題