刪除頁腳下方的空白
[英]Removing white space below Footer
問題描述
我要刪除的頁腳下方有空白區域。
附件是我的頁腳代碼 HTML 和 CSS。
footer { text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-top: auto; }
<footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"> </div> </div> </footer>3 個解決方案
解決方案1
0 2022-12-31 03:13:45
你可以試試這個
footer { text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: auto; position: absolute; width: 100%; bottom: 0; }
<footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"> </div> </div> </footer>
解決方案2
0 2022-12-31 04:26:35
有很多方法可以實現最底部的頁腳 @chyke007 展示了使用絕對定位在相關元素底部啟動元素的解決方案。 這是實現粘性底部的一種非常常見的方法，但您必須了解相關的定位祖先元素和兄弟元素。 此外，如果您確實想使用絕對值 position，那么向主要內容添加填充底部可能是明智的，這至少是頁腳的最小設置高度。 這樣您的內容就不會在頁腳下方運行，您還需要注意您的 position zindex，因為其他元素可能會在頂部或下方運行。 對於任何定位元素，最好為您希望定位元素存在的位置設置索引區域，例如 1-1999、2000-3999 等，或者您希望為項目定義這些區域的方式，這是為了嘗試限制元素重疊。
另一種解決方案是使用諸如 flexbox 列的布局
html, body { margin: 0 } body { min-height: 100vh; display: flex; flex-direction: column } header { background: #333; flex: 0 0 60px } h1 { color: #eee; padding-left:15px; font: bold 1.2rem/60px "Montserrat" } main { flex: 1 1 auto; min-height: 500px } footer { background: #ccc; flex: 0 0 100px; text-align: center; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
<body> <header> <h1>Stack Example</h1> </header> <main></main> <footer class="footer py-4"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"></div> </div> </div> </footer> </body>
此外，如果您要為元素添加樣式，請盡量不要添加死樣式，因為您的頁腳具有文本中心和邊距自動，因此不需要邊距。 但我猜你試圖使用邊距使元素居中，但沒有定義寬度或最大寬度，邊距自動將不執行任何操作。 這些是需要注意的事情，而且這消除了任何項目的所有不必要的膨脹。
-我希望這是有幫助的！
解決方案3
0 2022-12-31 08:23:40
你可以試試這個。
footer { min-height: 100vh; display: flex; justify-content: center; align-items: flex-end; font-size: 0.9rem; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin-top: auto; }
<footer class="footer"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-4 text-lg-start">Copyright © myWebsite</div> <div class="col-lg-4 my-3 my-lg-0"></div> </div> </div> </footer>我希望這是有幫助的
從隱藏元素推出的頁腳下方刪除空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.