CSS: definindo largura / altura como porcentagem menos pixels

Estou tentando criar algumas classes CSS reutilizáveis ​​para obter mais consistência e menos confusão no meu site, e estou tentando padronizar uma coisa que uso com frequência.

Eu tenho um contêiner para o <div>qual não quero definir a altura (porque variará dependendo do local do site), e dentro dele há um cabeçalho <div>e, em seguida, uma lista não ordenada de itens, todos com CSS aplicado a eles.

Parece muito com isso:

Quero que a lista não ordenada ocupe a sala restante no contêiner <div>, sabendo que o cabeçalho <div>é 18pxalto. Só não sei como especificar a altura da lista como "o resultado de 100%menos 18px".

Eu já vi essa pergunta em alguns outros contextos no SO, mas achei que valeria a pena perguntar novamente pelo meu caso particular. Alguém tem algum conselho nessa situação?

Sei que este é um post antigo, mas, como não foi sugerido, vale a pena mencionar que se você estiver escrevendo para navegadores compatíveis com CSS3, poderá usar calc:

height: calc(100% - 18px);

Vale a pena notar que nem todos os navegadores atualmente suportam a função CSS3 calc () padrão; portanto, a implementação de versões específicas da função pode ser necessária da seguinte maneira:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Para uma abordagem um pouco diferente, você pode usar algo como isto na lista:

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

Isso funciona desde que o contêiner pai tenha position: relative;

Eu uso o Jquery para isso

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

vinculo o redimensionamento da janela para recalcá-lo sempre que a janela do navegador é redimensionada (se o tamanho do contêiner for alterado com o redimensionamento da janela)

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

Não defina a altura como porcentagem, apenas defina top=0e bottom=0, assim:

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

Presumindo 17px de altura do cabeçalho

Listar css:

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

CSS do cabeçalho:

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

1. Use margens negativas no elemento que você gostaria de menos pixels. (elemento desejado)
2. Faça overflow:hidden;no elemento que contém
3. Mude para overflow:auto;o elemento desejado.

Funcionou para mim!

Tente o tamanho da caixa. Para a 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 o cabeçalho:

position: absolute;
left: 0;
top: 0;
height: 10px;

Obviamente, o contêiner pai deve ter algo como:

position: relative;

Outra maneira de alcançar o mesmo objetivo: caixas flexíveis . Torne o contêiner uma caixa flexível da coluna e você terá toda a liberdade para permitir que alguns elementos tenham tamanho fixo (comportamento padrão) ou preencham / encolhem no espaço do contêiner (com flex-grow: 1 e flex- encolher: 1).

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Consulte https://jsfiddle.net/2Lmodwxk/ (tente estender ou reduzir a janela para perceber o efeito)

Nota: você também pode usar a propriedade taquigrafia:

   flex:1 1 auto;

Eu tentei algumas das outras respostas, e nenhuma delas funcionou exatamente como eu queria. Nossa situação era muito semelhante quando tínhamos um cabeçalho de janela e a janela era redimensionável com imagens no corpo da janela. Queríamos bloquear a proporção do redimensionamento sem precisar adicionar cálculos para levar em conta o tamanho fixo do cabeçalho e ainda assim fazer com que a imagem preencha o corpo da janela.

Abaixo, criei um snippet muito simples que mostra o que acabamos fazendo, que parece funcionar bem para a nossa situação e deve ser compatível com a maioria dos navegadores.

No elemento window, adicionamos uma margem de 20 px que contribui para o posicionamento em relação a outros elementos na tela, mas não contribui para o "tamanho" da janela. O cabeçalho da janela é então posicionado absolutamente (o que o remove do fluxo de outros elementos, para que não faça com que outros elementos como a lista não ordenada sejam deslocados) e seu topo é posicionado -20px, que coloca o cabeçalho dentro da margem da janela. Finalmente, nosso elemento ul é adicionado à janela e a altura pode ser definida como 100%, o que fará com que preencha o corpo da janela (excluindo a margem).

*,*: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>

Obrigado, resolvi o meu com a sua ajuda, aprimorando-o um pouco, pois quero uma div 100% largura 100% de altura (menos altura de uma barra inferior) e nenhuma rolagem no corpo (sem hack / ocultar barras de rolagem).

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>  

Isso fez o truque, oh sim, eu coloquei um valor um pouco melhor em div.ajustado para a parte inferior do que para a altura da barra inferior, caso contrário a barra de rolagem vertical aparece, eu ajustei para ser o valor mais próximo.

Essa diferença é porque um dos elementos na área dinâmica está adicionando um orifício extra extra do qual eu não sei como me livrar ... é uma tag de vídeo (HTML5), observe que coloquei essa tag de vídeo com este css ( então não há razão para fazer um furo no fundo, mas sim):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

O objetivo: ter um vídeo que use 100% do navegador (e redimensione dinamicamente quando o navegador é redimensionado, mas sem alterar a proporção) menos um espaço inferior que eu uso para uma div com alguns textos, botões, etc. (e validadores w3c & css, é claro).

EDIT: eu encontrei o motivo, tag de vídeo é como texto, não um elemento de bloco, então eu corrigi-lo com este css:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

Observe a display:block;tag no vídeo.

Não tenho certeza se isso funciona em sua situação específica, mas descobri que o preenchimento na div interna empurrará o conteúdo para dentro de uma div se a div contida tiver um tamanho fixo. Você precisaria flutuar ou posicionar absolutamente seu elemento de cabeçalho, mas, caso contrário, não tentei isso para divs de tamanho variável.