このリストをページの最下部に残すにはどうすればいいですか？

Question

これは私のページの一番下にあることを望みます。それの下に空白スペースはありません。私はちょっと混乱しています。普通の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>

Answer 1

これはそれを行う必要があります。 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>

Answer 2

は、あなたが探していると、あなたはそれがすべての時間のビューポートの底部に固定したくないので、「スティッキー」フッタで、ちょうどそれが常にしたいですページの下部にある。

これを行う最も簡単で現代的な方法は、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>

それを行うための別の方法はfooterにheightを割り当て、絶対にウィンドウの下部にそれを配置し、footer

の高さに一致する bodyに paddingを追加することです

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