Question

我在某个网站上工作，我无法弄清楚白色是否有空白现象。我有我的页面包装div和其他一切设置为宽度：100％;我的页眉和页脚使用了屏幕的整个宽度，但我的其他内容并未使用页面的所有宽度。我认为它与定位有关。

另外，我的jsfiddle搞砸了我的标题。我正在使用PHP，它在我的机器上工作。请忽略它。

.pageWrapper {
    width: 100%;
    height: 700px;
    margin: 0 auto;
}


#mainPage {
    width: 100%;
    background-image: url('http://i34.photobucket.com/albums/d101/Lee45276/food1_zps6cb55c3d.jpg');
    background-repeat: no-repeat;
    background-size: cover;
     margin: 0 auto;
}

编辑：我想出来但我无法发表答案：

我明白了。我不得不删除导航和页脚中的填充。

旧

nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
     padding: 1% 2.5%;
}

新

nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
}

Answer 1

如果您指的是主体内容

ORIGINAL

/***************
CONTENT
***************/

.contentDiv, #bulkdel {
    width: 95%;
    height: 400px;
    padding: 10px;
    margin: 5% auto 0;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
}

您的宽度设置为95%，这就是为什么它不使用100%

将其更改为

/***************
CONTENT
***************/

.contentDiv, #bulkdel {
    width: 100%;
    height: 400px;
    padding: 10px;
    margin: 5% auto 0;
    background-color: rgba(0, 0, 0, .8);
    text-align: center;
}

除此之外，我认为你网页上的其他一切看起来都很好

Answer 2

看起来好像你已经在页脚中添加了填充，这会将其推出其他内容。我确定删除填充将解决您的问题。

编辑：我看到你用答案更新了你的问题。

换句话说，改变这个：

nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    padding: 1% 2.5%; /* remove this */
}

到此：

nav, footer {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
}

我无法弄清楚如何摆脱空白

2 个答案: