ウェブサイトの問題黒い領域が表示される

Question

私はこのような問題をスタックオーバーフローに投稿することを許可されていることを願っています これは私の最初のポートフォリオの試みです！私は仕事のためのポートフォリオを作りようとしています。これまでのところ本当に良い学習の抑制がありましたし、キャリアとしてウェブデザインを続けたいと思っています。 だから私の問題は...私はフッタの上に表示され、それを解決する方法がわからない黒い領域がありますか？ 誰でも助けることができますか？ コードの量は申し訳ありません。彼らは中国を見ていきますので、スニペットにアイコンフォントを適用する方法を わからない、申し訳ありません:) スニペットが問題に codepenを引き起こしている私は私のウェブサイトに追加しようとした3列コードは、ポートフォリオ

されています

/*-------------------- 
 
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

のブラウザでは、縮小幅とき黒い領域が表示されます。

Answer 1

問題がある、あなたのフッターのtop: 210px;とあなたの体の

のでresonsive CSSコードを挿入し、それを修正するためにmargin : 0 0 150px;：今

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

を古いCSSの値が削除されます900pxよりも小さな画面のため。