Körpergröße 100% wird nicht berechnet

Ich habe eine div Ich möchte bis zum Ende der Seite erweitern. Der Standardansatz dafür scheint darin zu bestehen, die min-height auf 100% für die div die Sie wollen, die body und die html einzustellen. Ich habe dies getan, aber Browser (auf Firefox und Mobile Safari getestet) scheint es nicht zu kümmern. Vereinfachtes Code:Körpergröße 100% wird nicht berechnet

<html> 
    <head> 
     <style> 
     html{ 
       min-height: 100%; 
       position: relative; 
     } 
     body { 
      min-height: 100%; 
      position: relative; 
     } 
     #main { 
      min-height: 100%; 
      overflow:hidden; 
     } 
     </style> 
    </head> 
    <body> 
     <div id='main'> 
      <p>content</p> 
     </div> 
    </body> 
</html>

Eine nähere Betrachtung mit firebug zeigt, dass es die CSS liest gelesen wird, und sagt, dass es eine Höhe von 986px für HTML und Körperelemente berechnet (auf einem 1080p-Monitor), aber nur 517px für die div. Was wirklich merkwürdig ist, ist, dass die Layout-Registerkarte zu zeigen scheint, dass die Höhe des Körperelements nur 517px beträgt, obwohl es berechnet wurde, sollte es 986px sein.

So weiß der Browser, wie hoch die Höhe sein soll, weigert sich aber, sie tatsächlich einzustellen. Was die eigentliche ...

EDIT: Ich stieß auf eine ähnliche Frage, die mit dem Vorschlag vh anstelle von Prozentsätzen beantwortet wurde. Dies funktionierte für die Tags body und html, aber wenn es auf der div verwendet wird, macht es länger als die Seite, weil es tatsächlich eine Kopfzeile über der div. Also würde ich Prozentsätze verwenden, aber sie führen zu dem gleichen Problem, das ich ursprünglich mit body hatte: Es wird gelesen, berechnet, aber nicht ausgeführt.

Quelle

2016-09-01 inecrafter

Ein Ad-hoc Crud-Ansatz, den ich gerade bei einem Projekt verwende, ist 'html {height: 100%; } Körper {Marge: 0; Mindesthöhe: 100%; Anzeige: flex; Flex-Flow: Spalte nowrap; } #main {flex: 1; } ', dann sollte #main in allen modernen Browsern IIRC perfekt gestreckt werden. – Tony

Alles ist standard dokumentiert Verhalten von flex, nicht auf Browser-Macken angewiesen. Die Einstellung der Höhe von HTML-/Body-Elementen fühlt sich für mich anfälliger an und unterliegt der Browser-Implementierung. – Tony

Bitte versuchen Sie diesen Code kann es Ihnen helfen.

<div id=fullheight> 
Lorem Ipsum 
</div> 

* { padding: 0; margin: 0; } 
html, body, #fullheight { 
min-height: 100% !important; 
height: 100%; 
} 

#fullheight { 
width: 250px; 
background: blue; 
}

Quelle

2016-09-01 17:39:04

Der Code im ersten Kommentar hat den Trick gemacht. Ich habe keine Ahnung wie, aber es funktioniert jetzt. Lassen Sie den Code hier für zukünftige Referenz:

html { 
    height: 100%; 
} 
body { 
    margin: 0; 
    min-height: 100%; 
    display: flex; 
    flex-flow: 
    column nowrap; 
} 
#main { 
    flex: 1; 
}

Danke, Anton Strogonoff!

Quelle

2016-09-02 16:05:47 inecrafter

Es funktioniert hauptsächlich, weil Ihr 'html' auf 100% gesetzt wurde – Lee

Froh, dass es geholfen hat! – Tony

Körpergröße 100% wird nicht berechnet

Antwort

Verwandte Themen