Question

我正在设计ebay模板。但是，我一直遇到的一个问题是，似乎有一个空格，我无法摆脱mainContainer div和页脚之间的空白。我用绿色和红色突出显示了两个div，以使问题清晰。

我想知道如何摆脱空白，并让两个div在彼此之下。

帮助表示赞赏。

整个代码在jsfiddle

* {
    margin: 0;
}
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto;
}
.footer {
    height: 600px;
    margin: 0;
    padding: 0;
    background-color: red;
}
#top-bar {
    background: url(http://demo.presthemes.com/centrikids/themes/pt_centrikids/img/bg_topbottom.png) repeat-x;
    height: 15px;
}

Answer 1

删除mainContainer类和pageContainer id

中的顶级规则

.mainContainer {
    background-color: green;
    height: 900px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: left;
    /* top: -400px; */
    width: 100%;
}

#pageContainer {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 12px;
   font-style: normal;
   margin: 0 auto;
   padding: 0;
   position: relative;
   /* top: -267px; */
   width: 1393px;
}

Answer 2

我相信我找到了你的问题，顶部：-400px;

.mainContainer {
    background-color: green;
    height: 900px;
    width: 100%;
    /* background: #f8f8f8; */
    padding: 0;
    overflow: hidden;
    margin: 0;
    text-align: left;
    position: relative;
    top: -400px; <----------------This Guy here
}

Ebay列表模板中的内容和页脚之间的空白。

2 个答案: