Eine Seite Website Grundlayout

Ich habe das folgende Layout für meine Onepage Seite, ich habe noch nie zuvor eine gemacht, so ist es sehr eine Lernkurve.Eine Seite Website Grundlayout

Das einzige Problem, das ich derzeit sehen kann, ist, wenn ich die Höhe der Seite verkleinern, die Div-Größe auch schrumpft, auch wenn ich min-height: 800px; hinzufügen. Was kann ich tun, um dieses Problem zu umgehen? (Wenn ich das nicht richtig erklärt habe, verwende meinen Code und verkleinere die Höhe deiner Seite, so dass du nur die Hintergrundfarben sehen kannst, dann scrolle, du wirst bemerken, dass die Höhe nicht 800px ist),

div.top, 
 
div.mid, 
 
div.bottom { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
div.top { 
 
    background-color: red; 
 
    top: 0; 
 
} 
 
div.mid { 
 
    background-color: blue; 
 
    top: 100vh; 
 
} 
 
div.bottom { 
 
    background-color: yellow; 
 
    top: 200vh; 
 
}

<div class="top"> 
 
    <h1>Top</h1> 
 
</div> 
 

 
<div class="mid"> 
 
    <h1>Mid</h1> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom</h1> 
 
</div>

EDIT: um zu erklären, warum ich position: absolute ich position: absolute so verwenden bin mit, dass ich in der Lage bin topleft und right so zu verwenden, dass ich um jeden div den Rand nicht haben.

Ohne absolute

Mit absolute

Quelle

2016-11-14 oneman

es ist wegen der 'position: absolute;' – GvM

@GvM Nun, was würden Sie stattdessen vorschlagen? weil "fixed" die Fähigkeit zum Scrollen deaktiviert und 'relative' ein hässliches Layout erzeugt, das ich niemals verwenden würde – oneman

Wenn Sie' position: absolute' verwenden, hat das Element kein Gewicht auf der Seite, deshalb wird der Browser es rendern und dann 'gewinnen t es erneut verarbeiten. Sie verwenden divs übereinander gestapelt, so dass es keine Notwendigkeit gibt, eine absolute Position zu verwenden, werden sie natürlich stacked – Alex

body { 
 
    margin: 0; 
 
} 
 
.top, .mid, .bot { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
} 
 
.top { 
 
    background: red; 
 
} 
 
.mid { 
 
    background: blue; 
 
} 
 
.bot { 
 
    background: green; 
 
}

<div class="top"> 
 
    <span>top</span> 
 
</div> 
 
<div class="mid"> 
 
    <span>mid</span> 
 
</div> 
 
<div class="bot"> 
 
    <span>bot</span> 
 
</div>

Quelle

2016-11-14 01:42:22 GvM

Ah, ich habe nicht an den Standardrand gedacht, den dieser Körper hat. Dies funktioniert wie vorgesehen. – oneman

Ihre 'Marge' aus dem H1-Tag kommt, entfernt, dass und die Lücke verschwindet zwischen den divs . Ich habe die absolute Positionierung und links/rechts/oben Werte entfernt, da sie mit dem Entfernen der Marge redundant sind:

div.top, 
 
div.mid, 
 
div.bottom { 
 
    height: 100vh; 
 
    min-height: 800px; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    margin-top: 0; 
 
} 
 

 
div.top { 
 
    background-color: red; 
 
} 
 
div.mid { 
 
    background-color: blue; 
 
} 
 
div.bottom { 
 
    background-color: yellow; 
 
}

<div class="top"> 
 
    <h1>Top</h1> 
 
</div> 
 

 
<div class="mid"> 
 
    <h1>Mid</h1> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom</h1> 
 
</div>

Quelle

2016-11-14 09:35:36 efreeman

Eine Seite Website Grundlayout

Antwort

Verwandte Themen