Höhe Breite in Prozent css html einige seltsame Dinge

Ich habe eine seltsame Sache mit etwas CSS und HTML-Code. Der folgende Code funktioniert gut, wenn es in Browser Chrome, Firefox verwendet wird, aber wenn Entwickler-Tools verwenden und mit mobiler Ansicht nicht verstehen, warum nicht verstehen, aber die Mindesthöhe: 100%; ist nicht zutreffend? ein Screenshot enthalten. Also im normalen Browser funktioniert gut jede Idee, warum? Vielen Dank!Höhe Breite in Prozent css html einige seltsame Dinge

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
} 
 
* { 
 
    position: relative; 
 
} 
 
a, 
 
body, 
 
footer, 
 
header, 
 
h1, 
 
h2, 
 
html, 
 
img, 
 
li, 
 
p, 
 
section, 
 
span, 
 
sup, 
 
ul { 
 
    background: transparent; 
 
    border: 0; 
 
    font-size: 100%; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 0; 
 
    vertical-align: baseline; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    width: 210%; 
 
} 
 
body { 
 
    background: red; 
 
    color: #FFFFFF; 
 
    height: 100%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
    width: 210%; 
 
} 
 
section { 
 
    display: block; 
 
    float: left; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.test { 
 
    float: left; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    width: 20%; 
 
}

<body> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
    <section class="test" style="background-image: url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-95348.jpg');">test</section> 
 
</body>

Die Entwicklungs-Tools Screenshot von Chrome:

screenshoot

Wie kann es 100% Höhe auch auf Entwicklungs-Tools machen?

Irgendeine Idee?

THX!

Quelle

2016-10-03 derder

Ich denke es ist, weil die Entwickler-Tools von den 100% aus dem Fenster bei 71% anstelle von 100% wegnimmt. – Keith

Du hast dein 'head' Tag nicht geschlossen, bevor du den' body'tag öffnest (es gibt einen zweiten öffnenden head tag) – Johannes

repariere dieses Ding nicht: X und das 100% Fenster in dev tools das gleiche Ergebnis. : \ – derder

Die Min-Höhe wird neu berechnet, wenn Sie die Chrome-Dev-Tools inline öffnen. Wenn Sie sich die Höhe des rot markierten Teils der Seite genau ansehen, werden Sie feststellen, dass die Höhe dieselbe Höhe wie das Werkzeug Ihres Entwicklungswerkzeugs hat. Öffnen Sie die Dev-Tools als separates Fenster, um das Problem zu beheben.

Eine andere Lösung ist die Verwendung der Ansichtsfensterhöhe anstelle von Prozentangaben. Verwenden Sie 100vh statt 100%

Quelle

2016-10-03 17:41:54

Danke! Es ist dasselbe mit 100vh, aber mit dieser Hintergrundfarbe nicht anzuzeigen. Es ist ein bisschen komisch, warum das, aber ja, die 100vh ist eine etwas bessere Option dafür. Aber immer noch keine Idee, warum es nicht 100vh machen, weil es 100% der Ansichtsfensterhöhe bedeutet. : _ – derder

-1

Ihre ursprüngliche Frage </style><head><body> enthielt statt </style></head><body> (beachten Sie den zusätzlichen / vor head).

Dies zu beheben wird wahrscheinlich Ihr Problem lösen.

Quelle

2016-10-03 17:55:05

Es ist nicht. :(Ich werde mich freuen, wenn dies das Problem sein wird, aber es ist nicht: x – derder

Höhe Breite in Prozent css html einige seltsame Dinge

Antwort

Verwandte Themen