pantalla - cambiar tamaño div html
Haga que div(altura) ocupe la altura restante del padre (7)
Tengo un contenedor div con dos hijos. El primer niño tiene una altura determinada. ¿Cómo puedo hacer que el segundo hijo ocupe el "espacio libre" del contenedor div sin dar una altura específica?
En el ejemplo, el div rosa debe ocupar también el espacio en blanco.
Similar a esta pregunta: ¿Cómo hacer que div ocupe la altura restante?
Pero no quiero dar una posición absoluta .
A menos que sea un malentendido, solo puede agregar la height: 100%; y overflow:hidden; a #down .
#down {
background:pink;
height:100%;
overflow:hidden;
}
Editar: dado que no desea utilizar overflow:hidden; , puede usar display: table; para este escenario; sin embargo, no es compatible con IE 8. ( caniuse.com/css-table )
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}
Nota: Usted ha dicho que desea que la #down altura de altura sea #container height menos #up height. La display:table; la solución hace exactamente eso y este jsfiddle retratará eso bastante claro.
Han pasado casi dos años desde que hice esta pregunta. Me acabo de ocurrir con css calc () que resuelve este problema que tuve y pensé que sería bueno agregarlo en caso de que alguien tenga el mismo problema. (Por cierto, terminé usando la posición absoluta).
http://jsfiddle.net/S8g4E/955/
Aquí está el CSS
#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}
Y más información al respecto aquí: http://css-tricks.com/a-couple-of-use-cases-for-calc/
Soporte del navegador: http://caniuse.com/#feat=calc
La expansión del elemento #down para rellenar el espacio restante de #container se puede lograr de varias maneras dependiendo de la compatibilidad con el navegador que desee alcanzar y si #up tiene o no una altura definida.
Muestras
.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>
Cuadrícula
El diseño de grid de CSS ofrece otra opción, aunque puede no ser tan sencillo como el modelo de Flexbox. Sin embargo, solo requiere diseñar el elemento contenedor:
.container { display: grid; grid-template-rows: 100px }
El grid-template-rows define la primera fila como una altura fija de 100px, y las filas restantes se estirarán automáticamente para llenar el espacio restante.
Estoy bastante seguro de que IE11 requiere -ms- prefijos, así que asegúrese de validar la funcionalidad en los navegadores que desea admitir.
Flexbox
El Módulo de diseño de caja flexible de CSS3 ( flexbox ) ahora está bien respaldado y puede ser muy fácil de implementar. Debido a que es flexible, incluso funciona cuando #up no tiene una altura definida.
#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }
Es importante tener en cuenta que la compatibilidad con IE10 e IE11 para algunas propiedades de flexbox puede ser problemática, y IE9 o inferior no tiene soporte alguno.
Altura calculada
Otra solución fácil es usar la unidad funcional calc3 de calc , como señala Alvaro en su respuesta , pero requiere que la altura del primer hijo sea un valor conocido:
#up { height: 100px; }
#down { height: calc( 100% - 100px ); }
Es ampliamente compatible, con las únicas excepciones notables son <= IE8 o Safari 5 (sin soporte) e IE9 (soporte parcial). Algunos otros problemas incluyen el uso de calc junto con la transformación o la sombra de cuadro , así que asegúrese de probar en varios navegadores si eso le preocupa.
Otras alternativas
Si se necesita soporte más antiguo, puede agregar height:100%; hasta #down hará que la div rosa tenga la altura completa, con una advertencia. #up desbordamiento del contenedor, porque #up está presionando hacia abajo.
Por lo tanto, puede agregar overflow: hidden; al contenedor para arreglar eso.
Alternativamente, si la altura de #up es fija, puede colocarla absolutamente dentro del contenedor y agregar un relleno en #down .
Y, aún otra opción sería usar una pantalla de tabla:
#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}
Mi respuesta solo usa CSS, y no usa overflow: hidden o display: table-row. Requiere que el primer niño realmente tenga una altura determinada, pero en su pregunta afirma que solo el segundo niño necesita que no se especifique su altura, por lo que creo que debería encontrar esto aceptable.
html
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>
css
#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }
No estoy seguro de que se pueda hacer solo con CSS, a menos que te sientas cómodo simulando ilusiones. Tal vez use la respuesta de Josh Mein y configure #container overflow:hidden .
Por lo que vale, aquí hay una solución jQuery:
var contH = $(''#container'').height(),
upH = $(''#up'').height();
$(''#down'').css(''height'' , contH - upH);
Puede usar flotadores para empujar el contenido hacia abajo:
Tienes un contenedor de tamaño fijo:
#container {
width: 300px; height: 300px;
}
El contenido puede fluir al lado de un flotador. A menos que establezcamos el flotador en el ancho completo:
#up {
float: left;
width: 100%;
}
Mientras #up y #down comparten la posición superior, el contenido de #down solo puede comenzar después de la parte inferior del #up :
#down {
height:100%;
}
compruebe la demostración - http://jsfiddle.net/S8g4E/6/
usar css -
#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}