2016-07-09 8 views
0

Ich hoffe, ich kann Probleme wie diese auf Stack-Überlauf Dies ist meine erste Portfolio-Versuch! Ich versuche, ein Portfolio für die Arbeit zu schaffen, es war bisher eine wirklich gute Lernbehinderung und möchte das Webdesign als Träger weiterführen, obwohl ich noch viel mehr zu lernen habe! Also mein Problem ist ... ich habe einen schwarzen Bereich, der über der Fußzeile erscheint und ich bin nicht sicher, wie man es löst? Kann jemand helfen? Entschuldigung für die Menge an Code. nicht sicher, wie das Symbol Schriftart in die Schnipsel anzuwenden, so dass sie Chinesen aussehen wird, sorry :) Das Snippet ist die 3-Spalten-Code habe ich versucht, auf meiner Website hinzuzufügen, die das Problem Die codepen verursacht wird das PortfolioWebsite Problem Schwarzer Bereich erscheint

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

Der schwarze Bereich wird angezeigt, wenn der Browser ist shrank Breite.

+1

ich sehe keinen schwarzen Bereich über der Fußzeile – Thinker

+1

Ich auch nicht. Nicht in Ihrem Code-Snippet oder auf dem Codepen. – BurningLights

+0

Ich sollte erwähnt haben, verkleinern Sie die Breite Ihres Browsers auf rund 400/500px? –

Antwort

0

Das Problem ist die Fußzeile der top: 210px; und Ihr Körper des margin : 0 0 150px;

Also, es zu beheben, legen Sie einen resonsive Code CSS:

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

Jetzt für Bildschirme kleiner als 900px der alten CSS-Werte werden entfernt.

+0

Danke, ich schätze deine Antwort sehr! –

+0

Hey, wie kommt es noch? Ich verstehe nicht, warum dieser schwarze Bereich immer wieder erscheint. https://codepen.io/trigg/pen/OXxmrk Wenn Sie mir helfen könnten, würde ich es wirklich zu schätzen :) –

+0

Ich sehe nicht den Code, den ich Ihnen in der CSS gab. Hast du es gespeichert? – GramThanos

Verwandte Themen