Html firefox页面底部空白，但不包括chrome

在Firefox中，我的div下面有空格，但在Chrome中没有。我认为这与我的

#body content container

具有属性

位置：relative和
底部：300px这获得了我在Chrome中想要的正确定位效果，但在Firefox中它创建了一个空白。当我去掉这些线时，div在FF或Chrome中的位置都不正确

代码如下：

HTML:

这里还有一个指向该网站的链接：

我在这里太迷路了，任何建议都非常感谢！谢谢大家!
 尝试更改#body content容器的底部值

#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px;  /* change 300px to -15px */
}

在Firefox和Chrome上都进行了测试

或者，您可以针对Mozilla Firefox添加负边距底部
到#正文内容容器：

@-moz-document url-prefix() {
    #body-content-container {
    background-color: #d5b93f;
    position: relative;
    bottom: 300px;  
    margin-bottom:-320px;   }
}

在FireBug中的一些挖掘让我想到：

#body-content-container {
    background-color: #d5b93f;
    bottom: 300px; /* <-- this is the issue, remove it */
    position: relative;
}

#正文内容容器{
背景色：#d5b93f；
底部：300px；/*这会在div顶部创建空白，并向下移动div，以便加载页面时看到的是BG图像。我需要div开始定位在chrome和FF中的位置，但FF中底部没有空白。不过，感谢您的输入！这消除了底部的空白，但它确实存在完全向下移动div，因此您只能看到BG图像。我需要div从底部开始大约300px，如本站点中所示：
@-moz-document url-prefix() {
    #body-content-container {
    background-color: #d5b93f;
    position: relative;
    bottom: 300px;  
    margin-bottom:-320px;   }
}

#body-content-container {
    background-color: #d5b93f;
    bottom: 300px; /* <-- this is the issue, remove it */
    position: relative;
}