css - sirve - Cómo hacer que Div tenga la misma altura que el elemento principal(se muestra como tabla-celda)
table html (4)
Obtuve un contenedor div que contiene tres divs infantiles (varía en contenido), cada uno tan alto como el más alto. Logré esto configurando el contenedor para mostrar: table y los divs secundarios para mostrar: table-cell, etc.
Todo funcionó bien, hasta que ...
Inserté una nueva división dentro de una de las divs infantil e intenté hacerla altura: 100%, para que se extendiera a la misma altura que sus padres, pero eso no funcionó.
Por favor vea 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;
}
Debe establecer la height para los padres (contenedor e hijo) explícitamente, aquí hay otra solución alternativa (si no desea establecer esa altura explícitamente):
.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 hijo solo puede tomar una altura si el padre ya tiene uno configurado. Ver este ejemplo: Desplazamiento vertical 100% 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;
}
$(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>
Otra opción es configurar el div hijo para que 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>
Puedes usar este CSS:
.content {
height: 100%;
display: inline-table;
background-color: blue;
}