que - height css porcentaje
CSS: ajuste de ancho/alto como porcentaje menos píxeles (11)
He visto esta pregunta en un par de contextos más en SO, pero pensé que valdría la pena volver a preguntar por mi caso particular. Estoy tratando de crear algunas clases de CSS reutilizables para obtener más coherencia y menos desorden en mi sitio, y estoy atascado en intentar estandarizar una cosa que uso con frecuencia.
Tengo un contenedor div para el que no quiero establecer la altura (porque variará según el lugar del sitio), y dentro de él hay un encabezado div, y luego una lista de elementos sin ordenar, todos con CSS Aplicado a ellos. Se parece mucho a esto:
Quiero que la lista desordenada ocupe el espacio restante en el contenedor div, sabiendo que el encabezado div tiene 18px de altura. Simplemente no sé cómo especificar la altura de la lista como "el resultado de 100% menos 18px". ¿Alguien tiene algún consejo en esta situación?
- Use márgenes negativos en el elemento que le gustaría quitar menos píxeles. (elemento deseado)
- Hacer
overflow:hidden;en el elemento que contiene - Cambiar a
overflow:auto;en el elemento deseado.
¡Funcionó para mí!
Gracias, resolví la mía con su ayuda, ajustándola un poco, ya que quiero una div 100% de ancho, 100% de altura (menos altura de una barra inferior) y no desplazarme en el cuerpo (sin cortar / ocultar barras de desplazamiento).
Para CSS:
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
Para HTML:
<body>
<div class="adjusted">
// My elements that go on dynamic size area
<div class="the_bottom_bar">
// My elements that goes on bottom bar (fixed heigh of 31 pixels)
</div>
</div>
Eso hizo el truco, oh sí, puse un valor un poco más grande en div.adaptado para la parte inferior que para la altura de la barra inferior; de lo contrario, aparece la barra de desplazamiento vertical, y me ajusté para ser el valor más cercano.
Esa diferencia se debe a que uno de los elementos en el área dinámica es agregar un orificio inferior adicional del que no sé cómo deshacerme de ... es una etiqueta de video (HTML5), tenga en cuenta que puse esa etiqueta de video con este css ( así que no hay razón para hacer un orificio inferior, pero lo hace):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
El objetivo: tener un video que tome el 100% del navegador (y se redimensione dinámicamente cuando se cambia el tamaño del navegador, pero sin alterar la relación de aspecto) menos un espacio inferior que utilizo para un div con algunos textos, botones, etc. (y validadores w3c y css por supuesto).
EDIT: encontré la razón, la etiqueta de video es como texto, no un elemento de bloque, así que lo arreglé con este css:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Tenga en cuenta la display:block; en la etiqueta de vídeo.
No defina la altura como un porcentaje, solo establezca la top=0 y la bottom=0 , así:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
No estoy seguro de si esto funciona en su situación particular, pero he encontrado que el relleno en el div interior empujará el contenido dentro de un div si el div que contiene es un tamaño fijo. Tendría que flotar o posicionar absolutamente su elemento de encabezado, pero de lo contrario, no he probado esto para divs de tamaño variable.
Otra forma de lograr el mismo objetivo: flexionar las cajas . Convierta el contenedor en un cuadro de flexión de columnas, y luego tendrá toda la libertad para permitir que algunos elementos tengan un tamaño fijo (comportamiento predeterminado) o para rellenar / reducir el espacio del contenedor (con flex-grow: 1 y flex- encogimiento: 1).
#wrap {
display:flex;
flex-direction:column;
}
.extendOrShrink {
flex-shrink:1;
flex-grow:1;
overflow:auto;
}
Vea https://jsfiddle.net/2Lmodwxk/ (intente extender o reducir la ventana para notar el efecto)
Nota: también puedes usar la propiedad de taquigrafía:
flex:1 1 auto;
Para un enfoque un poco diferente, podrías usar algo como esto en la lista:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
Esto funciona siempre que el contenedor principal tenga una position: relative;
Probé algunas de las otras respuestas, y ninguna de ellas funcionó como yo quería que lo hicieran. Nuestra situación fue muy similar en la que teníamos un encabezado de ventana y la ventana se redimensionó con imágenes en el cuerpo de la ventana. Queríamos bloquear la relación de aspecto del cambio de tamaño sin necesidad de agregar cálculos para tener en cuenta el tamaño fijo del encabezado y aún así la imagen ocuparía el cuerpo de la ventana.
A continuación, creé un fragmento muy simple que muestra lo que terminamos haciendo que parece funcionar bien para nuestra situación y debería ser compatible con la mayoría de los navegadores.
En nuestro elemento de ventana, agregamos un margen de 20 px que contribuye al posicionamiento en relación con otros elementos en la pantalla, pero no contribuye al "tamaño" de la ventana. El encabezado de la ventana se coloca absolutamente (lo que lo elimina del flujo de otros elementos, por lo que no hará que otros elementos, como la lista desordenada, se desplacen) y su parte superior se coloca -20px, que coloca el encabezado dentro del margen de la ventana. Finalmente, nuestro elemento ul se agrega a la ventana, y la altura se puede establecer en 100%, lo que hará que llene el cuerpo de la ventana (excluyendo el margen).
*,*:before,*:after
{
box-sizing: border-box;
}
.window
{
position: relative;
top: 20px;
left: 50px;
margin-top: 20px;
width: 150px;
height: 150px;
}
.window-header
{
position: absolute;
top: -20px;
height: 20px;
border: 2px solid black;
width: 100%;
}
ul
{
border: 5px dashed gray;
height: 100%;
}
<div class="window">
<div class="window-header">Hey this is a header</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Prueba el tamaño de la caja. Para la lista:
height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;
Para el encabezado:
position: absolute;
left: 0;
top: 0;
height: 10px;
Por supuesto, el contenedor padre debe tener algo como:
position: relative;
Suponiendo altura de cabecera 17px
Lista css:
height: 100%;
padding-top: 17px;
Encabezado css:
height: 17px;
float: left;
width: 100%;
Yo uso Jquery para esto
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
A continuación, enlace el tamaño de la ventana para volver a calcularlo cada vez que se cambia el tamaño de la ventana del navegador (si el tamaño del contenedor cambia con el tamaño de la ventana)
$(window).resize(function() { setSizes(); });
Me doy cuenta de que esta es una publicación antigua, pero dado que no se ha sugerido, vale la pena mencionar que si escribes para navegadores compatibles con CSS3, puedes usar calc :
height: calc(100% - 18px);
Vale la pena tener en cuenta que actualmente no todos los navegadores admiten la función calc () estándar de CSS3, por lo que es posible que se requiera la implementación de versiones específicas de la función para el navegador, como las siguientes:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);