مسج - ديناميكية div ارتفاع

Question

أحاول تغيير حجم div على pageload و نافذة تغيير الحجم.كود رفع الصوت عاليا يتم وضعها من قبل </body>, و أنه يعمل بشكل جيد على pageload ولكن لا شيء على نافذة تغيير الحجم.أنا اختبرت وظيفة تغيير الحجم مع تنبيه ، الذي يطلق على تغيير الحجم ، ولكن الارتفاع لم يتغير.

<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>

---

تحديث: بعد فترة انقطاع طويلة ، لقد اكتشفت ما هو الذي يسبب المشكلة.أنا باستخدام مسج النصي لإضافة نصب التمرير على نفس div أن يتم تغيير حجمها.عندما أعلق بها كل شيء تغيير حجم ما يرام.لقد انتقلت التمرير التهيئة في نفس الوظيفة مثل تغيير الحجم ، وحاولت أي اختلافات أستطيع التفكير..ما زلت لا أستطيع الحصول على عمل.

(ال #main-content div أيضا .انتقل جزء من الدرجة)

<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>

Answer 1

حلها!

كل ما يلزم هو إزالة jScrollPane قبل حساب الارتفاع ، وإعادة تطبيقه.

<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>

Answer 2

لاحظ أن نافذة تغيير الحجم وظيفة فقط حرائق مرة واحدة ، بعد أن النافذة تم تغيير حجمها.لا التحديث خلال تغيير حجم العملية ، لذلك إذا كنت سحب النافذة الحدود إلى هذا الاختبار ، أي تغييرات قبل ان اترك زر الماوس.

أيضا, تأكد من القيام بذلك في غضون $(document).ready(), مثل هذا:

<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>

هنا العمل التجريبي.

Answer 3

لا تنفيذ وظيفة ما لم الوثيقة ارتفاع أقل من أو يساوي ارتفاع النافذة.

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

كان لي مشاكل حيث المحتوى تتدفق خارج div.