我的引导页面页脚下方的空白区域
[英]White space below footer on my bootstrap pages
问题描述
While I nailed down a padding of 50px below my body previously, I am still having problems with a bunch of white space sitting below my footer on my pages.
虽然我之前在身体下方固定了 50 像素的填充，但我仍然遇到页面页脚下方有一堆空白的问题。 Do I merely need to make my content longer to fill the vertical space?我是否只需要让我的内容更长来填充垂直空间？ I'm using bootstrap for the first time to create my new site and I am left with this annoying dilemma.我第一次使用引导程序来创建我的新网站，但我遇到了这个烦人的困境。 here's a link to an offending page:这是指向违规页面的链接：
http://preview.yourgreatwebsite.com/ecom.php http://preview.yourgreatwebsite.com/ecom.php
I bet someone will look at this and show me something I'm not seeing in Firebug (or beyond Firebug).我敢打赌，有人会看到这个，并向我展示一些我在 Firebug（或 Firebug 之外）中没有看到的东西。 I've been looking at it for too long!我看了太久了！
8 个解决方案
解决方案1
3 2017-10-24 14:13:39
More than likely if you are using the sticky footer template from the bootstrap page you are dealing with the margin below text that is pushing the text inside the footer div further up and therefore pushing its parent element up too.如果您正在使用引导程序页面中的粘性页脚模板，则很有可能您正在处理文本下方的边距，该页边距将页脚 div 内的文本进一步向上推，因此也将其父元素向上推。 I had the same issue.我遇到过同样的问题。 An easy way to fix this would be to add the following code inside one of your stylesheets.解决此问题的一种简单方法是在其中一个样式表中添加以下代码。
.footer p { /* Selects text inside a <p> tag that is inside a .footer <div> */
margin-bottom: 0; /* removes default <p> tag margin from the bottom */
}
解决方案2
1 2015-02-13 16:38:15
Add some bottom padding (exactly the height of your footer) to the footer's parent element which is body in your case:向页脚的父元素添加一些底部填充（正好是页脚的高度），在您的情况下是body ：
body{
....
padding-bottom:70px;// You can adjust it
}
and make your footer's position absolute并使您的页脚位置absolute
.footer-main {
background: #81ccfb;
padding: 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
解决方案3
0 2015-02-13 16:41:12
You could use flexbox to fix the layout.您可以使用 flexbox 来修复布局。
Css css
body{
display:flex;
flex-direction: column;
}
.navbar {
order:1;
flex-shrink:1;
}
.headerstrip {
order:2;
flex-shrink:1;
}
.container {
order:3;
flex-grow: 5;
}
.footer-main {
order: 4;
flex-shrink: 1;
}
解决方案4
0 2017-04-07 20:37:03
Simply remove the default Bootstrap padding from the bottom of the page:只需从页面底部删除默认的 Bootstrap 填充：
body
{
padding-bottom:0;
}
解决方案5
0 2020-10-12 19:06:58
If in chrome dev tools you see that the body of the footer and the footer have different dimensions.如果在 chrome 开发工具中您看到页脚的主体和页脚的尺寸不同。 You could add negative margin bottom to the body.您可以在正文中添加负边距底部。 It is a quick fix.这是一个快速修复。
<body class="mb-n4">
</body>
This worked for me, perhaps it can help someone.这对我有用，也许它可以帮助某人。
解决方案6
0 2021-03-15 21:15:49
Well, the same happened to me.嗯，同样的事情发生在我身上。 Turned out I was dropping the elements into the header element, instead of dropping them into the body element.原来我是将元素放入 header 元素中，而不是将它们放入 body 元素中。 If anyone has the same problem, then try dropping them into the body tag within the overview panel.如果有人遇到同样的问题，请尝试将它们放入概览面板中的 body 标签中。 A lot more accurate.准确很多。
解决方案7
0 2021-10-16 23:12:50
I am using Angular with Bootstrap 5 and experienced the problem with .我在 Bootstrap 5 中使用 Angular 并且遇到了 . I added a style in the body as follows and problem went away我在正文中添加了一个样式如下，问题就消失了
<body style="height: auto;">
<app-root></app-root>
</body>
解决方案8
-1 2015-02-13 16:43:03
Simply add this to your footer class (in your case: .footer-main ):只需将此添加到您的footer类（在您的情况下： .footer-main ）：
position: absolute;
bottom: 0;
Quick explanation: it will set your footer as a floating block, which position doesn't depend on other elements, and then it will stick the footer to the bottom of the page.快速解释：它会将您的页脚设置为浮动块，其位置不依赖于其他元素，然后它将页脚粘贴到页面底部。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.