3 divs具有适应性高度(基于最高1)而不会令人耳目一新

Question

我有3个divs带有自己的ID。他们现在正常工作。另外，我还有一个JavaScript代码，可以使它们根据最高的高度使它们的高度相同。问题是我必须刷新才能查看结果。如果我调整屏幕大小，需要自动更改，需要更改，有人可以帮助我吗？我的实际代码：

html

        <div id="servicesBox1">
            <div id="servicesBoxInner1">
                <br>
                <img src="images/icon1.svg" id="servicesIcon1" class="servicesIcon1"/>
                <br>
                <span class="text100">
                <h3 class="serviceHeadText1" id="serviceHeadText">Estructuración Legal-Fiscal y Financiera</h3>
                </span>
                <h3 class="serviceSubText" id="service1Clicker">Aterrizamos tu Business Plan. Nuestra asesoría se encarga de informar sobre la legislación, licencias, impuestos y reglamentos que aplica a tu idea de negocio.</span></h3>
                <h3 class="moreInfo1">+ INFO</h3>
            </div>
        </div>
        <div id="servicesBox2">
            <div id="servicesBoxInner2">
                <br>
                <img src="images/icon2.svg" id="servicesIcon1" class="servicesIcon2"/>
                <br>
                <span class="text100">
                <h3 class="serviceHeadText2" id="serviceHeadText">Asesoría Legal Mercantil</h3>
                </span>
                <h3 class="serviceSubText" id="service2Clicker">Nos encargamos de todos los trámites relacionados con la constitución de sociedades y acompañamos al empresario durante la vida de la empresa para la toma oportuna de decisiones y cobertura de riesgos innecesarios.</h3>
                <h3 class="moreInfo2">+ INFO</h3>
            </div>
        </div>
        <div id="servicesBox3">
            <div id="servicesBoxInner3">
                <br><img src="images/icon3.svg" id="servicesIcon1" class="servicesIcon3"/>
                <br>
                <span class="text100">
                <h3 class="serviceHeadText3" id="serviceHeadText">Outsourcing Contable-Fiscal Laboral - Gestoría</h3>
                </span>
                <h3 class="serviceSubText" id="service3Clicker">Permitimos a los clientes concentrarse en la parte de negocio que conocen mejor y delegar las tareas contables, tributarias y laborales a nuestro equipo de profesionales.</h3>
                <h3 class="moreInfo3">+ INFO</h3>
            </div>
        </div>
        </div>

CSS

#superCentralizer {
 width: 90%;
 height: relative;
 position: relative;
 margin: 0 auto;
 background-color: ;
 }
#servicesBox1 {
 width: 30%;
 height: auto;
 background-color: #333333;
 position: relative;
 float: left;
 margin-bottom: 20px;
 color: #fff;
 cursor: pointer;
 transition: all 0.2s ease;
 }
 #servicesBoxInner1 {
width: 90%;
height: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
background-color: ;
margin-top:10px;
margin-bottom: 10px;
}
#servicesBox2 {
 width: 30%;
 height: auto;
 background-color: #333333;
 position: relative;
 display: inline-table;
 margin: 0 auto;
 cursor: pointer;
 transition: all 0.2s ease;
 }
 #servicesBox2:hover {
 background-color: #d3d3d3;
 color:#181818;
 }
#servicesBoxInner2 {
width: 90%;
height: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
background-color: ;
margin-top:10px;
margin-bottom: 10px;
}
#servicesBox3 {
 width: 30%;
 height: auto;
 background-color: #333333;
 position: relative;
 float: right;
 cursor: pointer;
 transition: all 0.2s ease;
 margin-bottom: 40px;
}

#servicesBox3:hover {
background-color: #d3d3d3;
color:#181818;
}
#servicesBoxInner3 {
width: 90%;
height: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
background-color: ;
margin-top:10px;
margin-bottom: 10px;
}

javascript

$(document).ready(function() {
    var height = Math.max($("#servicesBoxInner1").height(), 
$("#servicesBoxInner2").height(), $("#servicesBoxInner3").height());
    $("#servicesBoxInner1").height(height);
    $("#servicesBoxInner2").height(height);
    $("#servicesBoxInner3").height(height);
});

Answer 1

类似的东西可能会为您提供帮助。您需要在窗口大小事件上检测更改：

$(document).ready(function() {
function equalHeights() {
    var height = Math.max($("#servicesBoxInner1").height(), 
    $("#servicesBoxInner2").height(), $("#servicesBoxInner3").height());
    $("#servicesBoxInner1").height(height);
    $("#servicesBoxInner2").height(height);
    $("#servicesBoxInner3").height(height);
}
// Call function on initial page load
equalHeights();
  window.addEventListener('resize', function(event){
    // Call function on window resize
    equalHeights();
  });
});

替代

评论中建议的更好的方法是使用Flexbox，但我们不知道您的确切情况。

Answer 2

在该网站上的人们近十年来，如果感觉很不错，可以这样说：

我建议使用flexbox：https：//jsfiddle.net/q33ojfa1/

<div class="eq-height">
  <div>
    Box 1
  </div>
  <div>
    Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>Box 2<br>
  </div>
  <div>
    Box 3
  </div>
</div>

和CSS：

.eq-height {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.eq-height > div {
  flex-grow: 1;
  border: 1px solid #ccc;
  text-align: center;
  padding: 1em;
}