La hauteur de l'élément n'est pas renvoyée pour l'élément enfant immédiat

Question

J'ai le fichier Html suivant :

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

Comme il s'agit d'une bannière, elle commence sa vie cachée, dans ce cas en utilisant, height: 0; au niveau du message de la bannière.

Actuellement, j'utilise jquery pour renvoyer la hauteur de l'écran. message span, ce qui fonctionne. Je peux également obtenir la hauteur de l'élément icon si nécessaire.

Cependant, la hauteur de la message-container retourne 0.

Ce que je n'arrive pas à comprendre, c'est pourquoi tous les éléments enfants ne renvoient pas 0, et pas seulement l'enfant immédiat.

Plus important encore, comment puis-je le réparer ?

* UPDATE *

J'ai trouvé la cause de ce problème, mais je ne sais malheureusement pas encore comment le résoudre.

L'extrait montre deux exemples, le premier utilisant la fonction flexbox pour aligner les deux boîtes l'une à côté de l'autre, et l'autre sans flexbox.

Comme vous pouvez le voir, l'un renvoie une hauteur pour le conteneur, l'autre non.

La conception exige que les div's soient sur la même ligne et comme il y a environ 8 variations d'alignement, flexbox serait toujours la solution préférable.

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

C'est à cause de flexbox et du comportement d'alignement par défaut qui est stretch . Dans le premier cas, lorsque vous définissez height:0 à un conteneur flex, la hauteur de l'élément enfant (l'élément flex) sera étirée pour s'adapter à la hauteur du parent ; il aura donc aussi height:0

Pour mieux voir cela, supprimez overflow:hidden et ajoutez des bordures :

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

Comme vous pouvez le voir, la hauteur que vous calculez est définie par les bords verts et dans le premier cas, elle est égale à 0, mais pas dans le second.

Pour éviter cela, changez l'alignement pour un autre type d'étirement :

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