如何在頁面底部放置頁腳？
使用 class 時fixed-bottom，頁腳在滾動頁面時覆寫內容。
<div class="sticky-top">
<qipr-header></qipr-header>
<qipr-sidenav></qipr-sidenav>
</div>
<section class="container-fluid">
<div class="row">
<div class="content offset-md-3 offset-lg-2 col-md-9 col-lg-10 mb-4 mt-2">
<router-outlet></router-outlet>
</div>
</div>
</section>
<div class="fixed-bottom">
<qipr-footer></qipr-footer>
</div>
uj5u.com熱心網友回復：
.fixed-bottom {
position: fixed;
bottom: 0;
}<div class='fixed-bottom'></div>uj5u.com熱心網友回復：
創建一個父（
div或body）以放置具有相對位置的頁面元素（頁眉、包裝器和頁腳）。創建具有固定位置的標題（用于粘性標題）
添加頁面內容的容器
創建沒有任何位置或顯示的頁腳
.page-body {
position: relative;
width: 500px;
font-family: arial;
}
.top-header {
position: fixed;
top: 0;
left: 0;
background: #efefef;
border: 1px solid #ccc;
border-radius: 0 0 10px 10px;
height: 30px;
width: 500px;
margin: 0 10px;
padding: 10px 15px;
z-index: 9999;
}
.container {
color: #414141;
padding: 50px 10px 10px;
}
.footer {
background: #efefef;
border: 1px solid #ccc;
height: 200px;
width: 500px;
padding: 10px 15px;
border-radius: 10px;
}<div class="page-body">
<div class="top-header">Header</div>
<div class="container">
<p>1: Lorem ipsum dolor sit amet...</p>
<br>
<p>2: Lorem ipsum dolor sit amet...</p>
<br>
<p>3: Lorem ipsum dolor sit amet...</p>
<br>
<p>4: Lorem ipsum dolor sit amet...</p>
<br>
<p>5: Lorem ipsum dolor sit amet...</p>
<br>
<p>6: Lorem ipsum dolor sit amet...</p>
<br>
<p>7: Lorem ipsum dolor sit amet...</p>
<br>
<p>8: Lorem ipsum dolor sit amet...</p>
<br>
<p>9: Lorem ipsum dolor sit amet...</p>
<br>
<p>10: Lorem ipsum dolor sit amet...</p>
<br>
<p>11: Lorem ipsum dolor sit amet...</p>
</div>
<div class="footer">
Footer!
</div>
</div>uj5u.com熱心網友回復：
將 padding-bottom 賦予與頁腳高度相等的內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/387171.html
標籤：css bootstrap-4