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

回答

相關問題