Domanda Come rendere div stessa altezza di un genitore (visualizzato come tabella-cella)


Ho ottenuto un contenitore div contenente tre divs bambino (variano nel contenuto) - ciascuno alto come il più alto. Ho gestito questo impostando il contenitore per visualizzare: tabella e le div figlio per visualizzare: tabella-cella ecc.

Tutto ha funzionato bene, fino a ...

Ho inserito un nuovo div all'interno di una delle div del bambino e ho cercato di farlo in altezza: 100% - quindi si estenderebbe alla stessa altezza dei suoi genitori, ma non ha funzionato.

Si prega di consultare il mio JSFiddle: http://jsfiddle.net/bkG5A/

Qualsiasi aiuto sarebbe molto apprezzato!

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

30
2018-03-28 12:11


origine


risposte:


Un'altra opzione è quella di impostare il div bambino a 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>


JSFiddle Demo


31
2018-03-28 12:29



Devi impostare il height per i genitori (contenitore e figlio) esplicitamente, ecco un altro work-around (se non si desidera impostare esplicitamente tale altezza):

.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;
}

Violino


8
2018-03-28 12:26



Puoi usare questo CSS:

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

JSFiddle


5
2018-03-28 12:34



Il bambino può prendere un'altezza solo se il genitore ne ha già uno impostato. Vedi questo esempio: Scorrimento verticale altezza 100%

 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
2017-09-03 06:42