CSS: configuración de ancho / alto como porcentaje menos píxeles

Estoy tratando de crear algunas clases CSS reutilizables para obtener más consistencia y menos desorden en mi sitio, y estoy atascado en tratar de estandarizar una cosa que uso con frecuencia.

Tengo un contenedor para el <div>que no quiero establecer la altura (porque variará dependiendo de en qué parte del sitio se encuentre), y dentro de él hay un encabezado <div>, y luego una lista desordenada de elementos, todo 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>es 18pxalto. Simplemente no sé cómo especificar la altura de la lista como "el resultado de 100%menos 18px".

He visto esta pregunta en un par de contextos más sobre SO, pero pensé que valdría la pena volver a preguntar por mi caso particular. ¿Alguien tiene algún consejo en esta situación?

Me doy cuenta de que esta es una publicación antigua, pero dado que no se ha sugerido, vale la pena mencionar que si está escribiendo para navegadores compatibles con CSS3, puede usar calc:

height: calc(100% - 18px);

Vale la pena señalar que no todos los navegadores actualmente admiten la función estándar CSS3 calc (), por lo que puede ser necesario implementar las versiones específicas de la función del 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);

Para un enfoque un poco diferente, podría usar algo como esto en la lista:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

Esto funciona siempre que el contenedor principal tenga position: relative;

Yo uso Jquery para esto

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

luego ato el cambio de tamaño de la ventana para recalcularlo cada vez que se cambia el tamaño de la ventana del navegador (si el tamaño del contenedor cambia con el cambio de tamaño de la ventana)

$(window).resize(function() { setSizes(); });

No defina la altura como un porcentaje, solo configure top=0y bottom=0, de esta manera:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Suponiendo una altura de encabezado de 17 px

Lista css:

height: 100%;
padding-top: 17px;

Encabezado css:

height: 17px;
float: left;
width: 100%;

1. Use márgenes negativos en el elemento que le gustaría quitar menos píxeles. (elemento deseado)
2. Hacer overflow:hidden;en el elemento contenedor
3. Cambie a overflow:auto;en el elemento deseado.

¡Funcionó para mí!

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 principal debe tener algo como:

position: relative;

Otra forma de lograr el mismo objetivo: cajas flexibles . Convierta el contenedor en una caja flexible de columna, 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;
}

Consulte https://jsfiddle.net/2Lmodwxk/ (intente extender o reducir la ventana para notar el efecto)

Nota: también puede usar la propiedad abreviada:

   flex:1 1 auto;

Intenté algunas de las otras respuestas, y ninguna de ellas funcionó como yo quería. Nuestra situación era muy similar cuando teníamos un encabezado de ventana y la ventana era redimensionable 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í tener la imagen llena 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 en la mayoría de los navegadores.

En nuestro elemento de ventana agregamos un margen de 20px 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, lo 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 al 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>

Gracias, resolví la mía con tu ayuda, ajustándola un poco ya que quiero un div 100% de ancho 100% de altura (menos altura de una barra inferior) y sin desplazamiento en el cuerpo (sin piratear / 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 funcionó, oh sí, puse un valor un poco mejor en div.ajustada para la altura de la barra inferior que para la inferior, de lo contrario aparece la barra de desplazamiento vertical, ajusté el valor más cercano.

Esa diferencia se debe a que uno de los elementos en el área dinámica es agregar un agujero inferior adicional del que no sé cómo deshacerme ... 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 que haga un agujero 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 cambie de tamaño 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).

EDITAR: 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 display:block;en cuenta la etiqueta de video.

No estoy seguro de si esto funciona en su situación particular, pero he encontrado que el relleno en el div interno empujará el contenido dentro de un div si el div que lo contiene es de un tamaño fijo. Tendría que flotar o posicionar absolutamente su elemento de encabezado, pero de lo contrario, no he intentado esto para divs de tamaño variable.