web-dev-qa-db-fra.com

Comment faire en sorte que div ait la même hauteur que le parent (affiché sous forme de tableau)

J'ai un conteneur contenant trois divs (de contenu différent), chacun aussi grand que le plus grand. J'ai réussi ceci en configurant le conteneur pour afficher: table et les divs enfants pour afficher: table-cellule, etc.

Tout a bien fonctionné, jusqu'à ce que ...

J'ai inséré une nouvelle div à l'intérieur de l'une des divs et essayé de la faire à 100% - pour qu'elle s'étire à la même hauteur que ses parents, mais cela n'a pas fonctionné.

S'il vous plaît voir mon JSFiddle: http://jsfiddle.net/bkG5A/

Toute aide serait grandement appréciée!

HTML

<div class="container">
    <div class="child">
        a<br />a<br />a
    </div>
    <div class="child">
        a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
    <div class="child">
        <div class="content">
            a<br />a<br />a
        </div>
    </div>
</div>

CSS

.container {
    display: table;
}
.child {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}
.content {
    height: 100%;
    background-color: blue;
}
csshtmlmultiple-columns
30
Chris

Une autre option consiste à définir votre div enfant sur display: inline-block;

.content {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
}


.container {
  display: table;
}
.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
}
.content {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="child">
    a
    <br />a
    <br />a
  </div>
  <div class="child">
    a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
    <br />a
  </div>
  <div class="child">
    <div class="content">
      a
      <br />a
      <br />a
    </div>
  </div>
</div>

Démo JSFiddle

32
reinder

Vous devez définir explicitement la height pour les parents (conteneur et enfant). Voici un autre moyen de contourner le problème (si vous ne souhaitez pas définir explicitement cette hauteur):

.child {
  width: 30px;
  background-color: red;
  display: table-cell;
  vertical-align: top;
  position:relative;
}

.content {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  background-color: blue;
}

Fiddle

8
King King

Vous pouvez utiliser ce CSS:

.content {
    height: 100%;
    display: inline-table;
    background-color: blue;
}

JSFiddle

5
Tom Spee

L'enfant ne peut prendre une hauteur que si le parent en a déjà une. Voir cet exemple: Défilement vertical 100% hauteur

 html, body {
        height: 100%;
        margin: 0;
    }
    .header{
        height: 10%;
        background-color: #a8d6fe;
    }
    .middle {
        background-color: #eba5a3;
        min-height: 80%;
    }
    .footer {
        height: 10%;
        background-color: #faf2cc;
    }


    $(function() {
      $('a[href*="#nav-"]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 500);
            return false;
          }
        }
      });
    });
html,
body {
  height: 100%;
  margin: 0;
}
.header {
  height: 100%;
  background-color: #a8d6fe;
}
.middle {
  background-color: #eba5a3;
  min-height: 100%;
}
.footer {
  height: 100%;
  background-color: #faf2cc;
}
nav {
  position: fixed;
  top: 10px;
  left: 0px;
}
nav li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <nav>
    <ul>
      <li>
        <a href="#nav-a">got to a</a>
      </li>
      <li>
        <a href="#nav-b">got to b</a>
      </li>
      <li>
        <a href="#nav-c">got to c</a>
      </li>
    </ul>
  </nav>
  <div class="header" id="nav-a">

  </div>
  <div class="middle" id="nav-b">

  </div>
  <div class="footer" id="nav-c">

  </div>

0
drew7721