Tengo un div contenedor que contiene tres niños divs (varían en contenido) – cada uno tan alto como el más alto de uno. He conseguido esta estableciendo el contenedor para mostrar:la tabla y el niño divs para display:table-cell etc.

Todo funcionaba bien, hasta que…

He insertado un nuevo div dentro de uno de los hijo de divs y trató de hacerla altura:100% – por lo que se extenderían a la misma altura que sus padres, pero que no funcionó.

Por favor, ver a mi JSFiddle: http://jsfiddle.net/bkG5A/

Cualquier ayuda sería muy apreciada!

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;
}
InformationsquelleAutor Chris | 2014-03-28

4 Comentarios

  1. 32

    Otra opción es poner a su hijo div a display: inline-block;

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

    CSS:

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

    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>


    JSFiddle Demo

    • curiosamente, esto no funciona en IE 10 y FF 28 (incluso mi solución no funciona en IE 10 y SS), no puede entender estos 2 navegadores en todo.
    • No funciona en IE Borde.
    • Tengo el mismo problema. Mostrar la tabla no funciona en todos los navegadores.
  2. 8

    Usted tiene que fijar el height para los padres (contenedor y niño) de forma explícita, aquí es otro trabajo-en torno a (si usted no desea ajustar la altura de forma explícita):

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

    El violín

    • También, creo que es una mala idea utilizar el posicionamiento absoluto para resolver esto.
    • no entiendo por qué no funciona para usted, he de curso probado. Y no es una mala idea en absoluto, usted no puede entender cómo posicionamiento absoluto funciona en todos los
    • Tienes razón sobre el código de trabajo de la multa – no me funciona debido a algún terrible de almacenamiento en caché en Firefox. Pero todavía no estoy convencido de que el posicionamiento absoluto es una buena solución. He aquí una razón de por qué: jsfiddle.net/bkG5A/5 – acolchado adicional a la div.
    • parece posicionamiento absoluto no es buena en este caso donde tenemos que lidiar con la table-cell diseño, que creo que es muy complicado. La solución que tiene, de hecho, no funciona en FireFox 28 y IE 10 (no estoy seguro de lo que las versiones que se tienen, sino los de la versión son los más recientes). No es la única solución en la que podemos configurar el height explícitamente para la container y child (como mencioné en la respuesta), que puede funcionar bien para Chrome, Opera y FireFox pero no en IE 10 (tan raro), este problema es difícil de resolver cross-browser aunque parece simple, de hecho.
    • Sí, tienes toda la razón. Estoy de acuerdo en que esta es una tarea muy sencilla, pero aunque difícil de resolver en el css. Supongo que esto tiene que ser resuelto en JS después de todo? Como con el jQuery.equalHeights plugin.
    • Pensé por un momento que esto iba a funcionar para mí, pero en la práctica me di cuenta de que la posición absoluta saca del flujo y el div me había dejado flotando junto a él ya no carrozas donde yo quiera.

  3. 5

    Puede utilizar este CSS:

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

    JSFiddle

    • Eso funcionó muy bien 🙂 Pero prefiero reinders solución mejor, como el div, ya está dentro de una tabla y, a continuación, podría no ser la mejor solución para hacer de ella una tabla dentro de una tabla.
  4. 0

    El niño sólo puede tener una altura si el padre tiene uno ya establecido. Ver este exaple : El Desplazamiento Vertical del 100% de la altura

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

    JS:

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

    CSS:

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

    HTML:

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

Dejar respuesta

Please enter your comment!
Please enter your name here