Question

我想在页面更改大小时调整div的高度。在我目前的状态下，它在页面加载方面效果很好。但是，当我改变浏览器大小时，它不起作用。如果我在脚本中抛出警报，则每次页面调整大小时都会触发，但不会更改div的css。

    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">dddA box full of teddddddddddxt and sometdddhing elsdedd andd else adnd dsomddething besiddeds dddddd dddddd ddd ddd d ddddeddxdtdd andddddd somdddddething else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of texdt and something else and else and something besiclasss text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of tdext and something else and else and something besiclasss text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of tedxt and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of text and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of text and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
</div>

jquery脚本：

<script>
      $(document).ready(function() {
         var bodyheight = $('.text').height();
         $(".text").height(bodyheight);
     });

      $(window).resize(function() {
         function checkWidth(){
         var bodyheight = $('.text').height();
         $(".text").height(bodyheight);     
      }
       checkWidth();
       $(window).resize();
    });

</script>

这可能吗？如果是这样的话浏览器上有多少工作可以使用这样的东西？谢谢你的帮助。

这里小提琴： http://jsfiddle.net/g9c41hfv/

第二小提琴： http://jsfiddle.net/d1a0rv8r/您必须调整屏幕大小才能启动它

Answer 1

您在调整大小时使用的JS代码必须是：

function checkWidth() {
    var text = $('.text').height();
    $(".text").height(text+10);
}


$(document).ready(function() {
    checkWidth();
    $(window).on('resize', checkWidth);
});

但是你有一个逻辑错误：$(node).height($(node).height()) - 什么都不做！

Answer 2

我认为您正在寻找的语法是：

$(window).resize( function() { checkWidth() });

jquery窗口调整div高度

2 个答案: