Höhe und Breite machen 100% des Geräts

Ich möchte, dass der Körper Ränder von 15px haben und 100% Höhe und Breite des Fensters bleiben, 100 Vh ist das gleiche.Höhe und Breite machen 100% des Geräts

Ich möchte einen Begrüßungsbildschirm, der auf den Bildschirm (Auflösung des Benutzers) passt, so im Grunde sollte der Körper es selbst auf die Bildschirmhöhe und -breite ändern, wenn der Benutzer die Größe des Fensters ändert.

Ok, so ist das Problem, wenn ich 100% oder vh mit Marge verwenden es überläuft, kann ich nicht mit versteckten Cuz ich brauche den unteren Teil, jetzt ist es okay mit Breite, weil der Display-Block, das Problem für die Breite behebt .

h https://jsfiddle.net/0dx36zb4/

Quelle

2016-11-19 potato

try Höhe und Breite Auto –

Versuchen

body { 
    width: 100vw; 
    height: 100vh; 
}

Quelle

2016-11-19 09:13:53

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    border: 0; 
 
    overflow: hidden; 
 
} 
 
.splash { 
 
    height: 100%; 
 
    width: 100%; 
 
    z-index: 0; 
 
}

<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg 
 
    " class="splash" />

Quelle

2016-11-19 09:21:52

ich brauche Margen. – potato

können Sie mir bitte genau sagen, welche Art von Bildschirm Sie wollen? so ich cam Ihnen helfen. –

Vollbild-Landing-Page mit Rändern und kein Scrollen – potato

Sie haben box-sizing: border-box; zu verwenden zusammen mit width: 100vw; und height; 100vh;

Quelle

2016-11-19 09:24:11

funktioniert mit Paddings nicht Margen, es gibt immer noch einen Überlauf mit Margen – potato

auch das erlaubt keine Polsterung nach unten – potato

wofür brauchen Sie die Ränder? Möglicherweise müssen Sie einen Workaround durchführen, damit es funktioniert. –

Verwenden Sie keinen Rand für den Körper, sondern verwenden Sie ein Eltern-/Kindelement und legen Sie den Abstand für das Elternelement fest. Die Marge liegt außerhalb des Elements und wird daher in der Berechnung nicht berücksichtigt. Ihr Überlauf liegt bei 100% der Breite/Höhe plus 15px in jeder Richtung. Das Padding befindet sich innerhalb des Elements und Sie können den Browser so einstellen, dass es in Ihren Breiten-/Höhenspezifikationen mit der Eigenschaft box-sizing:border-box berücksichtigt wird.

HTML

<html> 
    <body> 
     <div id="parent"> 
      <div id="child"> 
      </div> 
     </div> 
    </body> 
</html>

CSS

body { 
    width:100vw; 
    height:100vh; 
} 

#parent { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    width:100%; 
    height:100%; 
    padding:15px; 
    margin:0; 
} 

#child { 
    width:100%; 
    height:100%; 
    margin:0; 
}

EDIT

ich auch in der Lage war zu Ihrem JSFiddle bekommen arbeiten, so können Sie ein Beispiel dafür sehen, wenn Sie Ersetzen Sie Ihren Code durch den folgenden Code.

Quelle

2016-11-19 09:32:05 ryansin

Verwenden Sie Padding und Box-Sizing, um das Problem zu beheben. Ich aktualisiert Ihre JSFiddle zu arbeiten:

https://jsfiddle.net/0dx36zb4/4/


 
html,body { 
 
    background-color: red; 
 
    height: 100%; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
} 
 

 
body { 
 
    padding:15px; 
 
    margin: 0; 
 
} 
 

 
section { 
 
    background-color: yellow; 
 
    height: 100%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
    <section> 
 
    <h1>hello</h1> 
 
    </section> 
 
</body>

Quelle

2016-11-21 17:48:42 pulekies

Höhe und Breite machen 100% des Geräts

Antwort

Verwandte Themen