Einstellung 100% Höhe, auf der sich ein absolut positioniertes element, wenn die Inhalte erweitert Vergangenheit der Fenstergröße

So nach dem Lesen von Stack Overflow und das web, die ich gesammelt habe, gibt es zwei tricks, um die eine 100% - Höhe:

  1. Set Höhe:100% auf die HTML-und BODY -
  2. Set ein element zu haben, entweder:
    • Höhe:100% oder
    • oben:0, unten:0, position:absolute

Aber auch mit diesen tricks ich Schwierigkeiten beim einstellen der Höhe eines absolut positionierten DIV-Element zu einem echten 100%. Ich kann 100% von der viewport-Größe, aber wenn der Benutzer scrollt es wird deutlich, dass das div nicht wirklich 100% Höhe.

Habe ich eine einfache JS-Fiddle von der situation hier:
http://jsfiddle.net/9FEne/

Meine Frage ist: kennt jemand weitere tricks, um eine echte (dh. Inhalt-Höhe, nicht viewport-Höhe) 100% Höhe absolut positionierten div -?

position: relative? top: 0; bottom:0 hätte keine Wirkung auf eine relativ positionierte element.
Nein wäre es nicht... 🙂
Oh, naja, vielleicht, der Ansatz war ja mit position: absolute. Ich weiß nur, dass position:absolute ist nicht für mich arbeiten, aber ich habe gesehen, dass oben:0/bottom:0 Technik irgendwo ...
Ich denke, was ich sagen wollte war, können Sie immer noch gelten die top, left etc Eigenschaften für relativ positionierte Elemente. Ich denke, was Sie versuchen zu sagen ist, dass die Einstellung 0 würde keine Wirkung haben, da das ist, wo es in den normalen Ablauf sowieso.
das ist nicht das, was wir sagen überhaupt. Einstellung zu etwas hat keine Wirkung auf die relativ positionierte Elemente. Sie sind standardmäßig auf "auto" (nicht null) und setzen Sie Sie auf null (oder etwas anderes) hat eine Wirkung, aber nur, wenn Sie mit der position "absolute" oder "fixed".

InformationsquelleAutor machineghost | 2012-04-13

  1. 11

    Sorry, ich habe die Frage vor und dachte, Sie wollte das Fenster gefüllt. Wenn das Problem ist, dass die Inhalte länger sind als das Fenster, dann, was Sie brauchen, ist zum hinzufügen position:relative auf den Körper. http://jsfiddle.net/9FEne/7/

    Was passiert ist, dass, wenn Sie absolut position etwas, das es Positionen (und-Größen) - bezogen auf das nächste positionierte element. Wenn Sie nicht sagen, es zu positionieren, um den Körper dann es wird die position der Fenster.

    Es funktioniert nicht wirklich, wenn es keine oder zu wenig Inhalt zu füllen Bildschirm in der Höhe. Vielleicht möchten Sie auch hinzufügen height: 100%; auf beiden body und html Elemente.

    InformationsquelleAutor Prestaul

  2. 7

    Können Sie jQuery verwenden zu erreichen, dieser trick

    var h = $(window).height();
$('#yourdiv').height(h);
    Dies ist eine css-Frage, nicht eine javascript-Frage.
    Auch Sie fragte, ob es "weitere tricks". javascript geben könnte, eine einfache Lösung für dieses problem.
    Ich werde sagen, die gleiche Sache, sagte ich zu OnResolve: Das ist fair genug, aber es ist nicht schwierig zu lösen mit css und hinzufügen von javascript in den mix bringt andere Probleme... E. g. was passiert, wenn der Benutzer ändert seinen Web-browser?
    Auch Sie haben den Punkt verpasst seiner Frage. Er will sich nicht von der Größe des Fensters. Er will die Größe, um den Inhalt seines Dokuments.
    Sie können leicht erkennen, wenn das Fenster geändert wird, kann sich mit jQuery zu, verwenden Sie die resize () - Methode.

    InformationsquelleAutor Trav McKinney

  3. 4

    Ich würde die javascript verwenden, weisen Sie die Höhe und Breite gleich Dokuments Höhe und Fenster Breite; habe ich geändert jsfiddle zu demonstrieren es hier:

    http://jsfiddle.net/9FEne/1/

    Dies ist eine css-Frage, obwohl, und nicht eine javascript-Frage...
    Eigentlich, wenn Sie Lesen seine Frage, es gibt nichts, anspielend auf die Tatsache, dass seine Lösung muss sich css-only. In der Tat klingt es so, als wäre er erschöpft, css und muss noch das gewünschte Ergebnis. Nicht sicher, warum eine andere Lösung ist es Wert eine -1...scheint so, als wäre es am besten, um alle Optionen vorgestellt, nicht?
    Das ist fair genug, aber es ist nicht schwierig zu lösen mit css und hinzufügen von javascript in den mix bringt andere Probleme... E. g. was passiert, wenn der Benutzer ändert seinen Web-browser?
    Sie sind beide Recht: ich war auf der Suche nach einer reinen CSS-Lösung, aber ich wollte nicht in irgendeiner Weise darauf hinweisen, dass direkt in der ursprünglichen Frage. Ich würde immer noch lieber eine Reine CSS-Lösung, aber da keiner erschienen, aber es sieht aus wie JS könnte der einzige Weg sein.

    InformationsquelleAutor OnResolve

Schreibe einen Kommentar