删除页脚下方的空白
[英]Removing white space below Footer
问题描述
I have empty space below the footer which I want to remove.
我要删除的页脚下方有空白区域。
Attached are my HTML and CSS codes for 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
You can try this你可以试试这个
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
There are many ways to achieve a bottom most footer @chyke007 showed a solution using positioning absolute to start the element at the relevant elements bottom.有很多方法可以实现最底部的页脚 @chyke007 展示了使用绝对定位在相关元素底部启动元素的解决方案。 This is a very common way to achieve a sticky bottom but you must stay aware of the relevant positioning ancestor and sibling element.这是实现粘性底部的一种非常常见的方法，但您必须了解相关的定位祖先元素和兄弟元素。 Also if you did want to use absolute position then it maybe wise to add padding bottom to the main content that is at least the min set height of your footer.此外，如果您确实想使用绝对值 position，那么向主要内容添加填充底部可能是明智的，这至少是页脚的最小设置高度。 This is so your content does not run underneath your footer also you will need to be aware of your position zindex for other element may running over-top or underneath.这样您的内容就不会在页脚下方运行，您还需要注意您的 position zindex，因为其他元素可能会在顶部或下方运行。 For any positioned element its a good idea to have indexing zone for where you want positioned element to exist such as 1-1999, 2000-3999, ect or how every you wish to define these zone for your project this is to try and limit element overlap.对于任何定位元素，最好为您希望定位元素存在的位置设置索引区域，例如 1-1999、2000-3999 等，或者您希望为项目定义这些区域的方式，这是为了尝试限制元素重叠。
The another solution is to use layouts such as flexbox columns另一种解决方案是使用诸如 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>
Also if you are going to style elements try to not add dead styling as your footer has text-center and margin auto there isn't no need the margin.此外，如果您要为元素添加样式，请尽量不要添加死样式，因为您的页脚具有文本中心和边距自动，因此不需要边距。 But I am guessing you were trying to use the margins to center the element but without defining a width or max-width the margin auto will do nothing.但我猜你试图使用边距使元素居中，但没有定义宽度或最大宽度，边距自动将不执行任何操作。 These are things to be aware of plus this removes all the unneeded bloat for any project.这些是需要注意的事情，而且这消除了任何项目的所有不必要的膨胀。
-I hope this is helpful! -我希望这是有帮助的！
解决方案3
0 2022-12-31 08:23:40
You can try this.你可以试试这个。
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> I hope this is helpful我希望这是有帮助的
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.