没有为直接子元素返回元素高度

Question

我有以下 HTML：

<div id="cookie-notice" class="banner-message with-icon">
    <div class="message-container">
        <div class="icon"><img src="/Assets/Media/Images/cookies.svg" alt="Cookies"></div>
        <div class="message">We use cookies for essential functionality and to track visits.</div>
    </div>
    <div class="button-container">
        <a class="md-flat-button" data-close-id="cookie-notice">Dismiss</a>
    </div>
</div>

因为它是一个横幅，所以它开始隐藏生命，在这种情况下，在横幅消息级别使用 height: 0;。

目前我使用 jquery 返回message 跨度的高度，它有效。如果需要，我还可以获得icon 元素的高度。

但是，message-container 的高度返回 0。

我无法理解的是，为什么所有子元素都不返回 0，而不仅仅是直接子元素。

更重要的是，我该如何解决？

* 更新 *

我找到了导致问题的原因 - 但不幸的是还不知道如何解决它。

sn-p 展示了两个例子，第一个使用 flexbox 将两个盒子并排对齐，另一个没有 flexbox。

如您所见，一个返回容器的高度，另一个不返回。

设计规定 div 位于同一行，并且由于对齐方式大约有 8 种变化，因此 flexbox 仍然是更可取的解决方案。

$(document).ready(function () {

  $banner1 = $("#banner1").first();
  $container1 = $banner1.find(".message-container").first();
  $message1 = $container1.find(".message").first();
  var containerHeight1 = $container1.height();
  var messageHeight1 = $message1.height();

 $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox");

  $banner2 = $("#banner2").first();
  $container2 = $banner2.find(".message-container").first();
  $message2 = $container2.find(".message").first();
  var containerHeight2 = $container2.height();
  var messageHeight2 = $message2.height();

 $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox");
});

.banner-message {
  height: 0;
  overflow:hidden;
  }

#banner1 {
  display: flex;
}
  
 .button-container a {
    padding: 0 16px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner1" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result1"></div>
<!-- Second test - this time with out height of zero -->
<div id="banner2" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result2"></div>

Answer 1

这是因为 flexbox 和默认对齐行为 stretch。对于第一种情况，当您将height:0 设置为弹性容器时，子元素（弹性项目）的高度将拉伸以适应父高度；因此它也会有height:0

为了更好地看到这一点，请删除 overflow:hidden 并添加边框：

$(document).ready(function() {

  $banner1 = $("#banner1").first();
  $container1 = $banner1.find(".message-container").first();
  $message1 = $container1.find(".message").first();
  var containerHeight1 = $container1.height();
  var messageHeight1 = $message1.height();

  $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox");

  $banner2 = $("#banner2").first();
  $container2 = $banner2.find(".message-container").first();
  $message2 = $container2.find(".message").first();
  var containerHeight2 = $container2.height();
  var messageHeight2 = $message2.height();

  $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox");
});

.banner-message {
  height: 0;
  margin-bottom:50px;
}

#banner1 {
  display: flex;
}

.message-container a {
  padding: 0 16px;
}

#banner1,
#banner2 {
  border: 1px solid red;
}
.message-container {
  border: 1px solid green;
}
#result1,#result2 {
 background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner1" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result1"></div>
<!-- Second test - this time with out height of zero -->
<div id="banner2" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result2"></div>

如您所见，您正在计算的高度由绿色边框定义，在第一种情况下它是 0，但在第二种情况下不是。

为了避免这种情况，将对齐方式更改为不同于拉伸的方式：

$(document).ready(function() {

  $banner1 = $("#banner1").first();
  $container1 = $banner1.find(".message-container").first();
  $message1 = $container1.find(".message").first();
  var containerHeight1 = $container1.height();
  var messageHeight1 = $message1.height();

  $("#result1").html("Message height is: " + messageHeight1 + ", Container height is: " + containerHeight1 + " - flexbox");

  $banner2 = $("#banner2").first();
  $container2 = $banner2.find(".message-container").first();
  $message2 = $container2.find(".message").first();
  var containerHeight2 = $container2.height();
  var messageHeight2 = $message2.height();

  $("#result2").html("Message height is: " + messageHeight2 + ", Container height is: " + containerHeight2 + " - no flexbox");
});

.banner-message {
  height: 0;
  margin-bottom:50px;
}

#banner1 {
  display: flex;
  align-items:flex-start; /*added this*/
}

.message-container a {
  padding: 0 16px;
}

#banner1,
#banner2 {
  border: 1px solid red;
}
.message-container {
  border: 1px solid green;
}
#result1,#result2 {
 background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner1" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result1"></div>
<!-- Second test - this time with out height of zero -->
<div id="banner2" class="banner-message">
  <div class="message-container">
    <div class="message">This is a bit of text that I need to get the height of</div>
  </div>
  <div class="button-container">
    <a>BUTTON</a>
  </div>
</div>
<div id="result2"></div>