Question

我已经尝试过关于stackoverflow的问题，并找到了一些建议，但是我无法从中获得任何建议。我试图确保每次调整浏览器窗口大小时divs / javascript更新的高度。

通过使用以下代码，我设法使浏览器完全刷新了页面而没有任何缓存，但是每次刷新页面都不是理想的选择。

$(window).bind('resize', function(e)
{
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function()
  {
    this.location.reload(false); /* false to get page from cache */
  }, 100);

很难改变高度，因为改变片段的分辨率并不能真正起到很大作用，但是我希望您能理解我的问题。

go();
window.addEventListener('resize', go);


function go() {
  var maxHeight = 0;
  $('.text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
  });
  $('.container .box, .text .box').css({
    height: maxHeight + 'px'
  });
}

.container {
  width: 400px;
  height: 500px;
}

.box {
  width: 100%;
  margin: auto;
  background-color: #ffcccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box">
    <p class="text">
      We are even height after resizing browser
    </p>
  </div>

  <div class="box">
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a maximus nisi. Etiam tempus venenatis ante, quis iaculis magna aliquet ac. Curabitur sit amet ipsum dolor. Maecenas finibus, lectus ut aliquet laoreet, eros libero semper tortor, nec facilisis
      purus nulla sed urna. Fusce laoreet finibus pharetra. Aliquam ut elit ultrices, consequat dui id, malesuada quam. Praesent semper ex sapien, elementum maximus nibh venenatis vitae. Fusce quis nisi imperdiet, rutrum elit et, ullamcorper velit. Curabitur
      vitae purus interdum ligula efficitur porttitor. Curabitur in nibh non nisi porttitor sagittis viverra ut sem
    </p>
  </div>

  <div class="box">
    <p class="text">
      There is more text in this box. <br> <br> yet the boxes are same height
    </p>
  </div>

</div>

或者，我也尝试了以下javascript代码。它们都是我在网上找到的，因为我几乎无法编写自己的东西，但是由于它们无法正常工作，我不确定是否正确地应用了它们。

var maxHeight = 0;
$('.values_text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.us_content .values_text, .values_li .values_text').css({height:maxHeight + 'px'});



window.addEventListener('resize', function(event){
    maxHeight = Math.max(maxHeight, $(this).height());
});

感谢您的帮助和建议

Answer 1

我可以看到您在提供的代码中使用了jQuery。
jQuery具有内置函数，每次调整大小时都会触发该函数。

function ajdustSizes() {
  var maxHeight = 0;
  $('.text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
  });
  $('.container .box, .text .box').css({
    height: maxHeight + 'px'
  });
}
$(window).resize(function() {ajdustSizes();});
ajdustSizes();

.container {
  max-width: 400px;
  height: 500px;
}

.box {
  width: 100%;
  margin: auto;
  background-color: #ffcccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box">
    <p class="text">
      We are even height after resizing browser
    </p>
  </div>

  <div class="box">
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a maximus nisi. Etiam tempus venenatis ante, quis iaculis magna aliquet ac. Curabitur sit amet ipsum dolor. Maecenas finibus, lectus ut aliquet laoreet, eros libero semper tortor, nec facilisis
      purus nulla sed urna. Fusce laoreet finibus pharetra. Aliquam ut elit ultrices, consequat dui id, malesuada quam. Praesent semper ex sapien, elementum maximus nibh venenatis vitae. Fusce quis nisi imperdiet, rutrum elit et, ullamcorper velit. Curabitur
      vitae purus interdum ligula efficitur porttitor. Curabitur in nibh non nisi porttitor sagittis viverra ut sem
    </p>
  </div>

  <div class="box">
    <p class="text">
      There is more text in this box. <br> <br> yet the boxes are same height
    </p>
  </div>

</div>

在此代码段中，您可以看到页面加载时以及每次jQuery发生resize事件时，均使用JS代码触发了AdjustSizes（）函数。

ALSO

如果您希望容器以某种方式“响应”，并使此代码实际运行，我建议您在.container CSS中使用max-width更改宽度，以使页面小于容器会适应。

希望对您有所帮助！

Answer 2

除了触发事件及其之后的功能外，您还可以触发事件：

$(window).resize(function() {ajdustSizes();}).trigger('resize');
// Or, improved:
$(window).resize(ajdustSizes).trigger('resize');

第二个参数需要一个函数。人们经常在函数部分中做很多事情，然后将其包装在匿名函数中，因为事件处理程序需要1个函数。但是您可以直接插入该函数，而输入1函数仅执行1函数是没有意义的。

Answer 3

好吧，我的朋友帮了一点忙，那是我现在拥有的代码，并且可以正常工作。

function go() {
var maxHeights = [];
$('.values_text').each(function() {
  $(this).css("height","");
    maxHeights.push($(this).height());
});
    maxHeight = Math.max.apply(Math, maxHeights);
$('.us_content .values_text, .values_li .values_text').css({height:maxHeight + 'px'});

}

$(window).on("resize",function(){

go()

});

重新调整大小后重新应用JavaScript代码

3 个答案: