CSS定位问题

我遇到了CSS问题，我有大量的空白空间，我不想要。我只想要内容区域容器来修复页面大小，尽管在我的生活中，我无法找到我所做的来解决这个问题。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; 
}

来源

2014-09-06 wgwgag

您的额外<div class="Clear" />和<div class="Clear"></div>正在创造额外的空白空间。

删除那些和白色空间将几乎完全消失。由于您的height: 100%元素的结果，页面的整体高度为500px，因此仍有一些空白空间。删除height:100%将删除额外的空白区域，但也会对页面的其他部分产生不利影响。

由于您的CSS有很多工作，我可能会建议您从本页开始重新构建一个元素，以查看每个元素和类如何影响您的布局。

JS Fiddle Demo

来源

2014-09-06 17:41:39 Dan

，并建立什么丹说，你正在使用太多的HTML为您所完成的事情。你一定可以删除很多。你为什么在你身上使用Clear？你知道任何明确的修复技巧吗？如果将Micro clearfix添加到'＃main-content-area'，它将包装所有浮动的子项。 http://nicolasgallagher.com/micro-clearfix-hack/ – 2014-09-06 18:12:35

多余的空白是由您.Clear因素造成的。 divheight: 100%得到应用。

来源

2014-09-06 17:39:40

只需更改CSS的文章。

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

这里，高度从500px更改为100％。

JS Fiddle

来源

2014-09-06 17:43:19

CSS定位问题

回答

相关问题