$ ('body'). Height() ändert sich unvorhersehbar

Question

Mein Ziel ist es, eine weiße div (#containMe) -Dehnung auf die gesamte Höhe des Dokuments zu haben, unabhängig von der Fenstergröße oder wieviel Inhalt ich auf der Seite habe.

Ich lege meinen HTML-Kopf und JQuery in ein PHP-Dokument und benutze PHP require_once, um diesen Header auf jede Seite zu setzen. Wenn ich jedoch #containMe mit Jquery auf die Höhe des Dokuments eingestellt habe, versucht es stattdessen, es auf die Körpergröße einzustellen. Die Körpergröße scheint sich auch jedes Mal zu ändern, wenn ich mich aktualisiere, was dazu führt, dass sich die Höhe von containedM unvorhersehbar ändert.

Die Höhe des Dokuments scheint konsistent zu bleiben, aber die Körpergröße schwankt, und #containMe versucht, an der Körperhöhe statt an der des Dokuments festzuhalten. Dies geschieht mit Chrome, Android Chrome und Firefox. Ich habe folgendes versucht:

$('body').height($(document).height()); 

Aber es schien keine Wirkung zu haben.

Hier ist meine Jquery in meinem Kopf:

<script> 
    $(document).ready(function() { 
     $("#containMe").height($(document).height()); 
     $("#containMe").width($(document).width() - 200); 
     $('.dropdown').hover(function() { 
     $('.dropdown-toggle', this).trigger('click'); 
     }); 
    }); 
</script> 

(Beachten Sie, dass die Bootstrap-Drop-Down-noch funktioniert)

Hier ist meine relevante CSS:

body 
{ 
    background: #333577 url(bg1.png); 
    height: 100%; 
} 

html 
{ 
    height: 100%; 
} 

#containMe 
{ 
    background: white; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    padding-top: 15px; 
    box-shadow: 0px 0px 25px #111111; 
} 

Hier ist der relevante HTML:

<div id="containMe" class="container-fluid"> 
     <div class="container-fluid jumbotron text-center"><h1>Web Pofrtfolio</h1> 
      <h2>By Rhea Herrmann</h2></div> 

Und hier ist ein Link zu der Seite, auf der das Problem auftritt. http://www.rheaherrmann.com/other/wiki.php

Wenn Sie nach unten scrollen und weiter aktualisieren, scheint die Höhe der div zu schwanken. Ich bin mir nicht sicher, was ich falsch mache.

Answer 1

Wenn ich dieses Recht bekommen Ich glaube, Sie könnten wie folgt vorgehen und alles sollte sein, wie Sie es erwarten sein:

• entfernen #containMe ‚s Höhe von der CSS, verwenden Sie keine Höhe überhaupt.
• Entfernen Sie .container-fluid in .jumbotron. Da Sie bereits eine .container-fluid Klasse oben haben, benötigen Sie keine weitere .container-fluid, und wie Bootstrap-Dokumentation heißt: Container sind keine nestables: http://getbootstrap.com/css/#overview-container.
• Entfernen Sie die .container-fluid Klasse neben .innards (aus dem gleichen Grund wie oben). Wenn Sie die Paddings unverändert lassen möchten, können Sie .col-sm-12 verwenden.
• Entfernen oder kommentieren Sie Javascript-Code, der die Höhe von #containMe ändert.

Bitte lassen Sie mich wissen, ob dies für Sie arbeitete.

Answer 2

-Verwenden Sie 100vh anstelle von 100% in Ihrem css für #containMe.

- Container nicht mit Bootstrap verschachteln. "Beachten Sie, dass aufgrund der Auffüllung und mehr kein Container verschachtelt werden kann." http://getbootstrap.com/css/#overview-container

Answer 3

$(document).ready(function() { 
 
    var windowheight = $(document).height(); 
 
    var windowwidth = $(document).width() - 200; 
 
    //alert (windowheight); 
 
    $('#containMe').css('height', windowheight + 'px'); 
 
    $("#containMe").css('width' ,windowwidth + 'px'); 
 
    $('.dropdown').hover(function() { 
 
     $('.dropdown-toggle', this).trigger('click'); 
 
    }); 
 
});

verwenden im JS

Answer 4

abwimmeln

height: [whatever]; 

In Ihrem #containMe Klasse im Stylesheet und entfernen Sie sie von Ihrem Element Stil (das Attribut style des #containMe-Elements. Es muss von beiden Orten weg sein.