Körpergröße von 100vh funktioniert nicht in responsive Layout

Ich habe meine Körpergröße auf 100vh (ich habe sogar versucht 100%) im normalen Layout in Desktop funktioniert es gut. Wenn jedoch die vertikale Höhe des Browsers reduziert wird, nimmt der Körper einschließlich der Seitenleiste und des Hauptinhalts, der in ihnen vorhanden ist, nicht mit 100% Höhe die gesamte Höhe des Fensters ein. Wie gehe ich voraus im Voraus.Körpergröße von 100vh funktioniert nicht in responsive Layout

versucht Einstellung ich auch

html{ 
    height:100%; 
} 
body{ 
    height:100%; 
}

Hinweis: ich für andere interne Layouten Bootstrap v3.3.7 SCSS verwende.

hier ist die jsfiddle

Hinweis 2: Dies ist, was passiert, wenn sidebar Höhe nicht die Breite verkleinert wird. Gleiches geschieht für Körper too.it ist voller Höhe Bildschirm

Quelle

2016-09-12 user93

Können wir einige Code zu sehen , Bitte? – StardustGogeta

Vielleicht möchten Sie ein funktionierendes https://jsfiddle.net Beispiel für uns hinzufügen –

Während ich es auf JsFiddle versuche, fand ich es funktioniert gut, Ihre 'html' und' body' nehmen 100% des Fensters aber nur das Element ist nicht lang genug, um alles zu füllen, darf ich wissen, was du erreichen willst? –

Schauen Sie sich die CSS nach dem die Demo /* New Arrival */

html, body { 
    margin: 0; 
    padding: 0; 
    min-height: 100vh; /* use min-height 100 vh instead of height to allow extended height with large content */ 
} 
ul { margin: 0} /* Remove the white space because of the ul margin */ 
nav { background-color: #ff9090; } 
/* Uncomment the following line to see different effect */ 
/* nav { position: fixed; top: 0; left: 0; right: 0; } */ 
.sidebar { background-color: #ff6d00; } 
.maincontainer { background-color: #aaa; } 

/* min-height and height CSS properties of .appcontent should be applied as following to take the fill height effect. display: table; to allow it's children to take the effect as well */ 
.appcontent { min-height: 100vh; height: 100%; display: table; } 
/* Since .appcontent display as table, it's children should be displayed as table row */ 
.appcontent > * { display: table-row; } 

/* To avoid the first 'table row' take most height of parent, set it's height to 0. The broser should be able to render the correct height */ 
.appcontent .sidebar, .appcontent .sidebar > * { height: 0; } 
/* Like the table case, the immediate elements inside a table-row element should display as table cell */ 
.appcontent .sidebar, 
.appcontent .maincontainer > * { display: table-cell; }

nicht besetzt Prüfen auf https://jsfiddle.net/7d7nLrfj/3/

Quelle

2016-09-12 03:48:01

Körpergröße von 100vh funktioniert nicht in responsive Layout

Antwort

Verwandte Themen