He estado buscando en Google posibles soluciones, pero hasta ahora no puedo encontrar una que se ajuste al resumen.
<div class="parent"> <div class="child1">I'm 60px tall and visible; my parent is 100px tall</div> <div class="child2">I'm 80px tall and hidden until needed</div> <div class="child3">I'm 100px tall and hidden until needed</div> </div>Usaré jQuery para cambiar el css del niño visible, pero preferiría una solución CSS para la altura si es posible.
No IE8/9/10 para apoyar.
¿Alguien tiene ideas?
Espero que esto sea lo que quieres:
flex para organizar al niño como pantalla de columna.opacity en 0 para que el elemento secundario aún permanezca en el div principal, esto establecerá la altura principal igual que el elemento secundario más alto.visible para diseñar el elemento secundario visible y se estableció el ancho predeterminado de los elementos secundarios (que están ocultos) width: 0px , mientras que el elemento secundario visible tendrá un width: 100% function show(element) { $('.parent div').removeClass('visible'); $('.' + element).addClass('visible'); } .parent { border: 1px dashed #000; display: flex; } .child1 { height: 60px; background: red; } .child2 { height: 80px; background: yellow; } .child3 { height: 100px; background: orange; } .parent div { opacity: 0; width: 0px; } .parent div.visible { opacity: 1; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div> <div class="child2">I'm 80px tall and hidden until needed</div> <div class="child3">I'm 100px tall and hidden until needed</div> </div> <br/> <button onclick="show('child1')">Child 1</button> <button onclick="show('child2')">Child 2</button> <button onclick="show('child3')">Child 3</button>hide usando opacity con 0 y 1 y el padre debe ser tan alto como el hijo más alto.
Ver fragmento a continuación
$(function(){ $(".c").fadeTo(0,0); $(".child1").fadeTo(0,1).addClass("visible"); $(".btn").click(function(){ $(".c").fadeTo(0,0); $(".visible").removeClass("visible").next().fadeTo(0,1).addClass("visible"); }); }); .parent { position:relative; border:2px solid red; display:flex } .c { border:2px solid blue; } .child1 { height:60px; } .child2 { height:80px; } .child3 { height:100px; } <div class="parent"> <div class="c child1">I'm 60px tall and visible; my parent is 100px tall</div> <div class="c child2">I'm 80px tall and hidden until needed</div> <div class="c child3">I'm 100px tall and hidden until needed</div> </div> <button class="btn">Show Next Child</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>