網站發佈黑色區域出現

我希望我可以發佈像堆棧溢出這樣的問題這是我第一次投資組合嘗試！我試圖創建一個工作組合，它迄今爲止是一個非常好的學習限制，並希望繼續作爲一個載體的網頁設計，即使我有更多的學習地獄！所以我的問題是...我有一個黑色的區域出現在頁腳上方，我不知道如何解決它？任何人都可以幫忙嗎？對不起，代碼量太大。不知道如何將圖標字體應用到片段，使他們看起來中國人，對不起:) 該片段是3列代碼我試圖添加到我的網站，這是造成問題的是codepen組合網站發佈黑色區域出現

/*-------------------- 
 
Content Start 
 
--------------------*/ 
 
#content-container { 
 
position: relative; \t 
 
overflow: hidden; 
 
width: 900px; 
 
height: 300px; 
 
background: #D5D5D5; \t 
 
    margin: auto; 
 
    top: 210px; left: 0; bottom: 0; right: 0; \t 
 

 
\t 
 
} 
 

 
\t .container > div { 
 
\t \t border: 5px solid #fff; 
 
\t \t box-sizing: border-box; 
 
\t \t padding: 1em; 
 
\t } 
 

 
\t \t .main{ 
 
\t \t \t background: #F29C9C; 
 
\t \t } 
 
\t \t .c2 { 
 
\t \t \t background: #F3E59A; 
 
\t \t } 
 
\t \t .c3 { 
 
\t \t \t background: #9FE0F6; 
 
\t \t } 
 

 
\t @media screen and (min-width: 768px) { 
 

 
\t \t \t .main { 
 
\t \t \t \t width: 50%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t margin-left: 25%; 
 
\t \t \t } 
 
\t \t \t .c2 { 
 
\t \t \t \t width: 25%; 
 
\t \t \t \t float: left; 
 
\t \t \t \t margin-left: -75%; 
 
\t \t \t } 
 
\t \t \t .c3 { 
 
\t \t \t \t width: 25%; 
 
\t \t \t \t float: right; 
 
\t \t \t } 
 
\t \t } 
 
/*-------------------- 
 
Content End 
 
--------------------*/

<div class="pattern"> 
 
    \t <div class="container"> 
 
\t  \t <div class="main"> 
 
\t \t \t  <h2>Main Content (1st)</h2> 
 
\t \t \t  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi.</p> 
 
\t \t  </div> 
 
    <div class="c2"> 
 
\t \t \t  <h3>Column (2nd)</h3> 
 
\t \t \t  <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
 
\t \t  </div> 
 
\t \t  <div class="c3"> 
 
\t \t \t  <h3>Column (3rd)</h3> 
 
\t \t \t  <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
 
    \t \t </div> 
 
\t </div> 
 
</div>

https://codepen.io/trigg/pen/OXxmrk

當瀏覽器寬度爲收縮顯示黑色區域。

來源

2016-07-09 Lawrence William Trigg

我看不到任何頁腳上方的黑色區域 – Thinker

我也沒有。不在你的代碼片段上，或在codepen上。 – BurningLights

我應該提到，將瀏覽器的寬度縮小到400/500px左右？ –

的問題是你的頁腳的top: 210px;和你身體的margin : 0 0 150px;

因此，要解決這個問題，插入一個resonsive CSS代碼：

@media screen and (max-width: 900px) { 
    body{ 
     margin: 0; 
    } 
    #footer { 
     top: 0px; 
    } 
}

現在對於屏幕比900px舊的CSS值將被刪除較小。

來源

2016-07-09 14:15:51 GramThanos

謝謝，我非常感謝您的回覆！ –

嘿，它怎麼還存在？我不明白爲什麼這個黑色區域不斷出現？ https://codepen.io/trigg/pen/OXxmrk 如果你能幫我，我真的很感激:) –

我沒有看到我在CSS給你的代碼。你救了嗎？ – GramThanos

網站發佈黑色區域出現

回答

相關問題