对于直接子元素

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，而不仅仅是直接的孩子。

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

*更新*

我找到了造成这个问题的原因 - 但遗憾的是我还不知道如何修复它。

该代码段显示了两个示例，第一个使用flexbox将两个框彼此对齐，另一个没有flexbox。

如你所见，一个人返回容器的高度，另一个人没有。

设计要求div在同一条线上，并且大约有8种对齐方式，flexbox仍然是首选解决方案。

＆＃13;

＆＃13;

$(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");
});

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为flexbox和默认对齐行为stretch。对于第一种将height:0设置为flex容器的情况，子元素（flex项）的高度将拉伸以适合父高度;因此它也会有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>