HTML-Vollbildseite ohne Bildlaufleisten

Ich habe versucht, eine Vollbild-Website ohne Bildlaufleisten zu erstellen und habe Probleme beim Definieren der Ränder dafür. Gegeben ist ein Mindest Beispiel:HTML-Vollbildseite ohne Bildlaufleisten

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

Warum erhalte ich den gelben Hintergrund des html Element im oberen Teil der Seite? Noch überraschender für mich ist, dass der gelbe Teil verschwindet, wenn ich Text vor dem h1 Element hinzufüge. ohne das Hinzufügen von Text vor der Überschrift Elemente

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     Add some text and the yellow part disappears. 
 
     <h1>Heading 1</h1> 
 
    </body>

Gibt es eine Idee, den gelben Teil in der Spitze zu vermeiden?

Quelle

2016-06-23 Holger

Probieren Sie Googeln "Collapsing Margins". –

Ihr body Element ist ein nicht-schwebendes Blockelement, genau wie das enthaltene Element h1. Daher passt sich die Größe/Position des Elements body an sein untergeordnetes Element h1 an, für das ein Rand (Rand oben) als Standard definiert ist.

Es gibt mehrere Lösungen für Ihr Problem, eines besteht darin, das Körperelement zum Schweben zu bringen. Der Vorteil davon ist, dass ich (im Vergleich zum Entfernen des Randes auf dem h1) genauso arbeiten werde, auch wenn ein anderes Element mit einem Rand eingefügt wird.

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    background: yellow; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    max-height: 100%; 
 
    background: green; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
h1 { 
 
    background: gray; 
 
}

<body> 
 
     <h1>Heading 1</h1> 
 
    </body>

Quelle

2016-06-23 10:12:12 MattDiMu

Setzen Sie einfach margin-top:0; auf Ihre h1. Example here

Ich empfehle einen CSS-Reset, um Probleme wie diese zu vermeiden. Eric Meyer's ist sehr bekannt und einfach.

Quelle

2016-06-23 10:09:49 Joseph

Wenn ein neues Projekt oder als allgemeine Regel beginnen, versuchen Sie immer eine Menge der vordefinierten CSS-Werte zurückzusetzen, die "add" Browser. Es gibt einige „CSS-Reset“ Sheets bereits erstellt, die Sie mit einer Google-Suche können, aber für eine einfache Lösung können Sie jederzeit beginnen mit:

* { margin: 0; padding: 0;}

Dann können Sie immer zusätzliche Regeln hinzufügen, dass alle Elemente beeinflussen in Ihr Dokument wie "font-family: sans-serif" usw. Auf diese Weise sind Sie sicher, dass Sie einen soliden Ausgangspunkt haben, ohne zu viele verschiedene Looks über Browser zu haben.

Später können Sie dann die Regeln mehr explizit auf die Elemente hinzufügen, die Styling brauchen

Quelle

2016-06-23 10:25:19 Winthxr1909

dies, wie ich würde eine Vollbild-Website tun und es ist sehr einfach und sauber:

<body> 

<h1>Main heading</h1> 

</body>

Die CSS-Code:

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

body { 
    background-color: green; 
    height: 100vh; 
} 

h1 { 
    color: #fff; 
    font-size: 40px; 
}

Also, wenn Sie auf Ihren Körper geben eine Höhe von 100vh (Darstellungshöhe) zu 100% des Fensters bleiben wird, unabhängig von der Größe des it.Like diese werden Sie nicht ap haben Problem mit Bildlaufleisten.

Quelle

2016-06-23 10:26:06

Dies ist, warum oft etwas wie normalize.css zu einem Projekt hinzugefügt wird, um diese Dinge mit anderen Browsern etc. zu vermeiden. height: 100vh; würde funktionieren. Um mit den Bildlaufleisten zu fahren, können Sie je nach Situation auch overflow-y: hidden; oder overflow-x: hidden; verwenden.

Quelle

2016-06-23 10:34:20

Try this:

.img-responsive { background-size: 100%; } 
OR 

.img-responsive { background-size: cover; }

Statt img-Tag, verwenden Sie Hintergrund-Bild für Vollbild-Bild.

<header> 
    <div class="menu_area">...</div> 
</header> 


html, body, header { 
    height: 100%; 
} 
header { 
    background-image: url('images/image1.jpg'); 
    background-size: cover; 
}

Quelle

2016-06-23 10:37:21 as7

HTML-Vollbildseite ohne Bildlaufleisten

Antwort

Verwandte Themen