Question

我有两个不同父母的不同div，我想让它们成为最高的div。

我使用以下代码管理它：

<script>
$(document).ready(function() {
    var height = Math.max($("#left").height(), $("#right").height());
    $("#left").height(height);
    $("#right").height(height);
});
</script>

html：

<div class="contact-information">
   <div class="centered" id="right">
       <h3>INFORMATII</h3>
       <p>Strada</p>
       <div class="social-icons-wrapper">
          ....                  
       </div><!-- social-icons-wrapper -->
   </div><!-- centered -->
</div><!-- contact-information -->

<div class="contact-box">
    <div class="width-for-centering" id="left">
         <div class="contact-title">
             <h3>CONTACTEAZA-NE!</h3>
             <p>Completeaza</p>
         </div><!-- contact-title -->

         <div class="tocenter" data-aos="zoom-out">
            <?php echo do_shortcode('[contact-form-7 id="63" title="formular"]'); ?>
         </div><!-- tocenter -->
    </div><!-- width-for-centering -->
</div><!-- contact-box -->

和css

#right{
width:400px;
height: auto;
overflow: hidden;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}

#left{
width:600px;
height: auto;
overflow: hidden;
z-index: 1;
padding-bottom: 0;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}

这样做，两个div现在都有相同的高度，我的问题是它们比它们应该更高。左边的孩子身高只增加了约600px，但现在身高只有737px。

我发现问题可能是上面的脚本，因为当我删除它时，左边确实是它的孩子的高度。

Answer 1

我看到的唯一问题是你的CSS。具体与位置：绝对;和变换。

看看我在没有CSS的情况下使用你的代码的小提琴：https://jsfiddle.net/g0utu4bz/

var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);

Answer 2

我已经使用弹性框和媒体查询编辑了内容，以便匹配请求...我添加了一些css，更适合移动设备（但只是一点点优化，你的布局需要更多的工作;））

我希望这会有所帮助！

P.S。展开剪切（“运行代码” - ＆gt;“整页”）以查看媒体查询的正确工作方式，否则您只会看到1列！

.left-right-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  /* this rules will be used only on devices with large screen, to make the layout a little bit more responsive */
  .left-right-container {
    flex-direction: row;
   }
   .left-right-container .left {
      width: 600px;
    }
    .left-right-container .right {
      width: 400px;
    }
    .left-right-container .last {
      min-height: 50px; /* as many as you need to show socials */
    }
}
.left-right-container .left, .left-right-container .right {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.left-right-container .left {
  background: green;
}
.left-right-container .right {
  background: red;
}
.left-right-container .left > *, .left-right-container .right > * {
  flex-grow: 0;
}

.left-right-container .left > .take-all, .left-right-container .right > .take-all {
  flex-grow: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-right-container">
<div class="contact-information">
   <div class="centered right">
       <h3>INFORMATII</h3>
       <p>Strada</p>
       <div class="social-icons-wrapper take-all">
          1<br>2<br>3<br>4<br>5<br>6
       </div>
       <div class="last">other content</div>
   </div><!-- centered -->
</div><!-- contact-information -->

<div class="contact-box">
    <div class="width-for-centering left">
         <h3>CONTACTEAZA-NE!</h3>
         <p>Completeaza</p>
         <div class="tocenter take-all" data-aos="zoom-out">
            1<br>2<br>3
         </div>
         <div class="last">other content</div>
    </div><!-- width-for-centering -->
</div><!-- contact-box -->
</div>

Answer 3

使用flexbox非常简单，你可以这样做：

＆＃13;

.wrapper {
	display: flex;
}

#right{
  width:400px;
  background-color: red;
}

#left{
  width:600px;
  background-color: blue;
}

＆＃13;

<div class="wrapper">

  <div class="contact-information" id="right">
    <div class="centered">
       <h3>INFORMATII</h3>
       <p>Strada</p>
       <div class="social-icons-wrapper">
          ....                  
       </div><!-- social-icons-wrapper -->
     </div><!-- centered -->
  </div><!-- contact-information -->

  <div class="contact-box" id="left">
    <div class="width-for-centering">
         <div class="contact-title">
             <h3>CONTACTEAZA-NE!</h3>
             <p>Completeaza</p>
         </div><!-- contact-title -->
         <div class="tocenter" data-aos="zoom-out">
         </div><!-- tocenter -->
    </div><!-- width-for-centering -->
  </div><!-- contact-box -->
  
</div>

＆＃13;

2个不相关的div具有相同的高度

3 个答案: