为什么页面底部有额外的空间？ [英] Why is there extra space on the bottom of page?

问题描述

我正尝试为我正在处理的网站制作，并且我无法摆脱底部的额外空白空间。我在Chrome和Safari中看到它（我还没有测试过其他浏览器）。首次加载页面时，您看不到它，但如果向下滚动，则只有大约2-3像素的空白区域。如何让我的页脚粘贴到底部？

这是网站：

< a href =http://ec2-23-23-22-128.compute-1.amazonaws.com/ =nofollow> http：//ec2-23-23-22-128.compute-1 .amazonaws.com /

这就是我想要完成的事情：

我如何摆脱页面底部的额外空白？

注意：我知道还有其他一些渲染问题，但我现在唯一担心的是页面底部的额外像素。我一直在玩负边距，0边距，填充等，我没有得到它的任何地方：/ b /

当你使用classimg-wrapper display：block 给div中的图像时，它会消失。这是常见的图像，我看你是这样做的CSS重置：

  * {
 margin：0px ; 
} 
  

我会反对这个建议。正确的 css重置或 normalize 将大大缓解这种头痛。

编辑：我知道你说这是一项正在进行的工作，但如果你没有注意到窗口也会在你不需要的时候滚动，那么你就会抬起头来。这是问题：

 ＃b-container {
 background-color：＃F1EFE6; 
最低身高：100％; 
 height：auto！important; 
身高：100％; 
 margin：0 auto -170px; //原本是0 auto -150px 
} 
  

I'm trying to make a sticky footer for a site I'm working on and I can't get rid of an extra white space at the bottom. I see it in Chrome and Safari (I haven't tested other browsers yet). When the page first loads, you don't see it, but if you scroll down there is about 2-3px of just white space. How to I make it so that my footer sticks to the bottom?

This is the site:

http://ec2-23-23-22-128.compute-1.amazonaws.com/

And this is what I'm trying to accomplish:

How do I get rid of the extra white space at the bottom of the page?

NOTE: I know there are a couple of other rendering issues, but the only one I'm worried about right now is the extra pixles on the bottom of the page. I've been playing with negative margins, 0 margins, paddings, etc all day and I'm not getting anywhere with it :/

解决方案

It disappears when you give the image in the div with class "img-wrapper" display: block. This is common with images, I see you are doing this for a css reset:

* {
  margin: 0px;
}

I would suggest against this. A proper css reset or normalize would go a long way to easing these kind of headaches.

Edit: I know you said it's a work in progress, but just as a heads up if you haven't noticed the window also scrolls when you don't need it to. This is the issue:

#b-container {
  background-color: #F1EFE6;
  min-height: 100%;
    height: auto !important;
    height: 100%;
  margin: 0 auto -170px; // originally this was 0 auto -150px
}

这篇关于为什么页面底部有额外的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！