Question

我的CSS问题，我有大量的空白，我不想要。我想要的只是内容区域容器来固定页面大小，但在我的生活中，我无法找到我所做的导致这个问题。

以下是我的问题的链接：

主要内容的CSS：

#main-body-area {
    background-size:cover;
    background:url(../Images/BluePrint.jpg) no-repeat;
    background-position:left;
    position:absolute;
}

#main-body-cover {
    background-color:pink;
    opacity: 0.75;
    position: absolute;
    height: 100%
}

#main-body-wrapper {
    width: 60%;
    background-color: yellow;
    margin: 0px auto;
    opacity: 0.75;
    border-radius: 20px;
    height: 95%;
}

#main-section {
    margin: 2%;
}


article {
    background-color:orange;
    border: 1px solid green;
    margin: 2%;
    height: 500px;
    width: 90%;
    display: inline-block;
}

Answer 1

您的额外<div class="Clear" />和<div class="Clear"></div>正在创建额外的空白区域。

删除它们，白色空间几乎完全消失。仍然存在一些空白区域，因为页面的总高度为500px，这是height: 100%元素的结果。删除height:100%将删除额外的空白区域，但也会对页面的其他部分产生负面影响。

由于你的CSS很多，我可能会建议重新开始使用这个页面并一次重建一个元素，看看每个元素和类如何影响你的布局。

JS Fiddle Demo

Answer 2

额外的空白区域是由.Clear元素引起的。 div height: 100%已应用于此。

Answer 3

只需更改文章的CSS。

article {
    background-color:orange;
    border: 1px solid green;
    margin: 2%;
    height: 100%;
    width: 90%;
    display: inline-block;
}

此处，身高从500px变为100％。

JS Fiddle

CSS定位问题

3 个答案: