Question

希望它位于我的页面底部。它下面没有空白区域。我有点困惑，因为正常的CSS使文字保持在底部不会在这里工作。

＆＃13;

    .footer li{
      display:inline;
    }

＆＃13;

    <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>

＆＃13;

Answer 1

这应该这样做。使用position: fixed;修复页脚并设置bottom: 0px;将其固定到页面底部。

＆＃13;

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

＆＃13;

 
    <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>

＆＃13;

Answer 2

你正在寻找的是一个＆＃34;粘性＆＃34;页脚，因为您不希望它一直固定在视口的底部，只是希望它始终位于页面的底部。

最简单/现代的方法是使用func documentBrowser(_ controller: UIDocumentBrowserViewController, didRequestDocumentCreationWithHandler importHandler: @escaping (URL?, UIDocumentBrowserViewController.ImportMode) -> Void) { print("creating document") ...容器并将flex设置为footer，这样它就会将自身推送到容器的底部。将容器设置为margin-top: auto，min-height: 100vh;将始终位于页面底部。

＆＃13;

footer

＆＃13;

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

＆＃13;

另一种方法是将<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

的高度

＆＃13;

footer

＆＃13;

.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;
}

＆＃13;

如何将此列表保留在页面底部？

2 个答案: