jQuery - dynamische div Höhe

Ich versuche, die Größe eines div auf pageload und Fenster Größe ändern. Der code unten wird platziert, bevor </body>, und es funktioniert gut auf pageload, tut aber nichts auf Fenster Größe ändern. Getestet habe ich die resize-Funktion mit einer Warnung auslöst, auf die Größe, aber die Höhe bleibt unverändert.

<script type='text/javascript'>
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
</script>

update: nach einer langen Pause, habe ich entdeckt, was das problem verursacht. Ich bin mit einem jquery-Skript hinzufügen eines formatierten Bildlaufleiste auf der gleichen div wird verkleinert. Wenn ich einen Kommentar, alles passt Prima. Ich ve zog die scrollbar-Initialisierung die gleiche Funktion wie "resize", und versucht alle Varianten die ich mir denken kann.. noch nicht bekommen kann es arbeiten.

(die #main-content-div hat auch .scroll-Bereich-Klasse) 

<script type='text/javascript'>
$(function(){
    $('#main-content').css({'height':(($(window).height())-361)+'px'});
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
    });
});
</script>
InformationsquelleAutor lemon | 2009-09-18
  1. 14

    gelöst!

    alle, die es brauchte, war jScrollPane entfernen, bevor die Berechnung der Höhe und re-Anwendung.

    <script type='text/javascript'>
$(function(){
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'});
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('.scroll-pane').jScrollPaneRemove();
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
          $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});
    });
});
</script>
    • hey, ich habe versucht, die dynamische Höhe eines div in meine app und ich habe Ihren code benutzt (den ich gerade entfernt die stuf über den scroll-Bereich). 🙂 Schöne Lösung.
    • Uncaught TypeError: $(...).jScrollPane is not a function ... Was jScrollPane? Seine plugin?
    InformationsquelleAutor lemon
  2. 5

    Beachten Sie, dass das Fenster resize-Funktion wird nur ausgelöst, einmal, nachdem er das Fenster wurde in der Größe verändert. Es aktualisiert sich nicht während der Größenänderung, so dass, wenn Sie ziehen Sie den Fensterrand, um dies zu testen, ohne änderungen passieren wird, bevor Sie loslassen der Maus-Taste.

    Stellen Sie außerdem sicher, dass Sie dies innerhalb von $(document).ready() wie diese:

    <script type='text/javascript'>
$(function()
{
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
});
</script>

    Hier ist ein arbeiten demo.

    • vielen Dank für die Klarstellung, das Thema, aber ich habe immer noch nicht das problem gelöst.. wenn ich Ihren code, Größe-Anpassung funktioniert nicht auf den laden oder auf Größe ändern. Ich habe keine Ahnung warum, da dein Beispiel funktioniert perfekt! wenn Sie irgendwelche Ideen haben, wie das, was möglicherweise stört, bitte Antworten..
    • testen Sie diese im IE? Ich hatte schon Probleme Größenänderung divs mit CSS-Höhe-Methode im IE - ich glaubst die Lösung ist die Definition einer Standard-Höhe für die div.
    • Das Fenster resize-Ereignis wird ausgelöst, in verschiedenen Abständen, je nach browser. Für (zumindest ältere Versionen, meiner Erfahrung nach), DH, es feuert für jede mögliche Größe der Aktion (und dann einige), für Firefox, es würgt Ereignisse basierend auf der verfügbaren Ressourcen, und für Safari, es feuert Sie konsequent in regelmäßigen Abständen ca. 100-200ms, je nach Aktion (es ist ähnlich wie Firefox das Modell feuert, aber viel weniger Häufig).
    • Ich danke Ihnen so sehr. Dies hat mir geholfen, loszuwerden, die horizontalen Sprung, der Auftritt, wenn eine scrollbar benötigt wird. Mit diesem code und ein bisschen css war ich in der Lage, entfernen Sie die horizontale springen, ohne dass ein Scrollbalken.
    InformationsquelleAutor Vegard Larsen
  3. 1

    Nicht-Funktion ausführen, es sei denn, das Dokument ist die Höhe weniger als oder gleich der Fensterhöhe.

    $(function() {
  if($(document).height() <= $(window).height()) {
    $('#wrapper').css({ 'height': ($(window).height()) });
    $(window).resize(function(){
      $('#wrapper').css({ 'height': ($(window).height()) });
    });
  }
});

    Hatte ich Probleme, wo der Inhalt fließen würde außerhalb der div.

    InformationsquelleAutor tnypxl
Schreibe einen Kommentar