2016-07-19 14 views
0

Also entwerfe ich eine Website, und ich habe ein Banner/Header Bild mit Text in der Mitte des Banners erstellt, und ich möchte alle meine Hauptinhalte unter dem Banner (das Banner ist die Typ, der die gesamte Seite abdeckt, so dass Sie nach unten scrollen, um den Inhalt zu sehen.Der Hauptinhalt geht jedoch nicht automatisch nach unten oder oben, abhängig von der Größe der Kopfzeile, da ich die Breite auf 100% setze, so wird es entsprechend die Größe des Fensters der Größe verändert, so könnte jemand mit diesem Problem helfen, so dass sie das gleiche Verhältnis mit dem Header/banner halten der HTML-Code:Setzen von Text unter einem Banner

<div id="banner"> 
    <h1 id="head">head</h1> 
    <img id="logo" src="Logo.jpg" alt="logo and banner"/> 
</div> 
<div id="everythingElse"> 
    <a href="#test">Scroll</a> 
    <p>Content</p> 
</div> 

CSS-Code:

#head{ 
text-align: center; 
position: absolute; 
top: 4%; 
left: 0; 
width: 100%; 
font-size: 100px 
} 

#logo{ 
width: 104%; 
} 

#banner{ 
position: absolute; 
width: 100%; /* for IE 6 */ 
top: 0; 
left: 0; 
right: 0; 
min-width: 1200px; 
} 

#everythingElse{ 
position: fixed; 
width: 100%; 
top: 75%; 
} 

Antwort

1

Verwenden Sie keine absolute Positionierung. Verwenden Sie eine Höhe von 100vh, wenn browser support akzeptabel ist, andernfalls verwenden Sie 100% und stellen Sie sicher, dass Ihre body und html Elemente in dieser Regel enthalten sind.

+0

Also sollte ich die Höhe des Banners oder des Haupttextinhalts einstellen? –

+0

Ich würde erwarten, dass der äußere Wrapper die Höhe des Ansichtsfensters haben soll. – isherwood

Verwandte Themen