删除页脚下方的空白
[英]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.