CSS: Como definir a largura / altura como porcentagem menos pixels

Question

Eu estou tentando criar algumas classes CSS reutilizáveis ??para mais consistência e menos desordem no meu site, e eu estou preso na tentativa de padronizar uma coisa que eu uso com freqüência.

Eu tenho um <div> recipiente que eu não quero para definir a altura for (porque vai variar dependendo de onde no site é), e dentro dela é um <div> cabeçalho e, em seguida, um lista não ordenada de itens, todos com CSS aplicado a eles.

Ele se parece muito com isto:

Eu quero que a lista não ordenada para assumir o quarto restante no <div> recipiente, sabendo que o <div> cabeçalho é 18px de altura. Eu só não sei como especificar a altura da lista como "o resultado de 100% 18px menos".

Eu vi esta pergunta perguntou em um par de outros contextos no SO, mas eu pensei que seria pena perguntar novamente para o meu caso particular. Alguém tem algum conselho nesta situação?

Answer 1

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

height: calc(100% - 18px);

Vale a pena notar que nem todos os navegadores atualmente suportam a função padrão calc CSS3 (), para implementar as versões específicas do navegador da função pode ser necessária como o seguinte:

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

Answer 2

Para um pouco de uma abordagem diferente, você poderia usar algo como esta na lista:

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

Isso funciona, desde que o recipiente pai tem position: relative;

Answer 3

Eu uso jQuery para este

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

então eu ligam o redimensionamento de janela para Recalc-lo sempre que a janela do navegador é redimensionada (se o tamanho do recipiente mudou com a janela de redimensionamento)

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

Answer 4

Não defina a altura como uma porcentagem, basta definir o top=0 e bottom=0, como este:

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

Answer 5

presumindo 17px altura do cabeçalho

Lista de css:

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

Header css:

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

Answer 6

1. Usar margens negativos sobre o elemento que você gostaria de menos pixels fora. (Elemento desejado)
2. Faça overflow:hidden; no elemento contendo
3. Mudar para overflow:auto; sobre o elemento desejado.

Ela trabalhou para mim!

Answer 7

Tente caixa-sizing. 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;

É claro, o recipiente pai deve tem algo como:

position: relative;

Answer 8

Eu tentei algumas das outras respostas, e nenhum deles funcionou muito bem como eu queria que eles. Nossa situação era muito semelhante onde tivemos um cabeçalho da janela ea janela foi redimensionada com imagens no corpo janela. Queríamos para bloquear a relação entre o redimensionamento aspecto sem a necessidade de adicionar em cálculos para a conta para o tamanho fixo do cabeçalho e ainda tem a imagem preencher o corpo janela.

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

Em nosso elemento janela nós adicionamos uma margem de 20px que contribui para o posicionamento em relação a outros elementos na tela, mas não contribui para o "tamanho" da janela. A janela de cabeçalho é então posicionado de forma absoluta (o que remove-lo do fluxo de outros elementos, de modo que não causa outros elementos, como a lista ordenada para ser deslocado) e o seu topo está posicionada -20px que coloca o interior do cabeçalho da margem da janela. Finalmente nosso elemento ul é adicionada à janela, e a altura pode ser definido como 100%, o que irá fazer com que para encher 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>

Answer 9

Outra forma de atingir o mesmo objetivo: caixas flexíveis . Faça o recipiente uma caixa flexível coluna, e então você tem toda a liberdade para permitir que alguns elementos a ter de tamanho fixo (comportamento padrão) ou para encher-up / encolher-down ao espaço recipiente (com flex-crescer: 1 e Flex encolher: 1.)

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

https://jsfiddle.net/2Lmodwxk/ (Tentar estender ou reduzir a janela para observar o efeito)

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

   flex:1 1 auto;

Answer 10

Obrigado, eu resolvido meu com a sua ajuda, aprimorando-o um pouco desde que eu quero uma div 100% largura de 100% ALTURA (menos altura de uma barra inferior) e nenhuma rolagem do corpo (sem barras de corte / esconderijos 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 colocar um valor pouco greatter em div.adjusted para a parte inferior do que para a altura da barra inferior, então as aparece barra de rolagem vertical, i ajustado para ser o valor mais próximo.

Essa diferença é porque um dos elementos na área dinâmica é a adição de um furo inferior extra que eu não sei como se livrar de ... é uma tag de vídeo (HTML5), por favor note que eu colocar a tag de vídeo com este css (por isso não há razão para isso para fazer um buraco fundo, mas ele faz):

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

O objetivo: ter um vídeo que leva a 100% do Brower (e redimensiona dinamicamente quando o navegador é redimensionada, mas sem alterar a relação de aspecto) menos um espaço inferior que eu uso para uma div com alguns textos, botões, etc (e validadores do W3C e CSS é claro).

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

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

Observe o display:block; na tag de vídeo.

Answer 11

Eu não tenho certeza se este trabalho em sua situação particular, mas eu descobri que estofamento na div dentro vai empurrar conteúdo dentro em torno de uma div se o div contendo é um tamanho fixo. Você teria que quer float ou absolutamente posicionar o seu elemento de cabeçalho, mas caso contrário, eu não tentei isso para divs de tamanho variável.