javascript - 未为直接子元素返回元素高度

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 span 的高度，这很有效。如果需要，我还可以获得 icon 元素的高度。

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

我不明白的是，为什么所有子元素都不返回 0，而不仅仅是直接子元素。

更重要的是，我该如何修复它？

* 更新 *

我已经找到导致问题的原因 - 但遗憾的是还不知道如何解决。

该片段显示了两个示例，第一个使用 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 设置为 flex 容器时，子元素(flex 元素)的高度将拉伸(stretch)以适应父元素的高度；因此它也将具有 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，但在第二种情况下则不是。

为避免这种情况，将对齐方式更改为与拉伸(stretch)不同的方式:

$(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>