CSS: configuração de largura / altura como porcentagem menos pixels

Eu já vi essa pergunta em alguns outros contextos sobre SO, mas achei que valeria a pena perguntar novamente para o meu caso em particular. Estou tentando criar algumas classs 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 div que eu não quero definir a altura para (porque ele irá variar dependendo de onde no site é), e dentro dele é um div de header e, em seguida, uma lista não ordenada de itens, todos com CSS aplicado a eles. Parece muito com isso:

Ferramenta

Eu quero que a lista não ordenada ocupe a sala restante na div do container, sabendo que a div do header tem 18px de altura. Eu só não sei como especificar a altura da lista como “o resultado de 100% menos 18px”. Alguém tem algum conselho nesta situação?

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

 height: calc(100% - 18px); 

Vale a pena notar que nem todos os navegadores suportam atualmente a function padrão CSS3 calc (), portanto, implementar as versões específicas do navegador da function pode ser necessário 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); 

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

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

Isso funciona enquanto o contêiner pai tiver position: relative;

Eu uso o Jquery para isso

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

então eu 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 um percentual, apenas defina o top=0 e bottom=0 , assim:

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

Presumindo a altura do header de 17px

Listar css:

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

Cabeçalho css:

 height: 17px; float: left; width: 100%; 
  1. Use as margens negativas no elemento que você deseja reduzir os pixels. (elemento desejado)
  2. overflow:hidden; no elemento contendo
  3. Mudar para overflow:auto; no elemento desejado.

Funcionou para mim!

Tente o tamanho da checkbox. 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 header:

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

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

 position: relative; 

Eu tentei algumas das outras respostas, e nenhuma delas funcionou como eu queria. Nossa situação era muito parecida onde tínhamos um header 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 considerar o tamanho fixo do header e ainda ter a imagem preenchendo o corpo da janela.

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

Em nosso elemento window, adicionamos uma margem de 20px que contribui para o posicionamento relativo a outros elementos na canvas, mas não contribui para o “tamanho” da janela. O header da janela é então posicionado absolutamente (o que o remove do stream de outros elementos, por isso não fará com que outros elementos como a lista não ordenada sejam deslocados) e seu topo está posicionado -20px, o que coloca o header dentro da margem da janela. Finalmente, o elemento ul é adicionado à janela e a altura pode ser definida como 100%, o que fará com que ele 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%; } 
 
Hey this is a header
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Obrigado, eu resolvi o meu com a sua ajuda, aprimorando um pouco desde que eu quero um div 100% largura 100% heigth (menos altura de uma barra inferior) e não rolar no corpo (sem hack / escondendo 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:

  
// My elements that go on dynamic size area
// My elements that goes on bottom bar (fixed heigh of 31 pixels)

Isso fez o truque, oh sim, eu coloquei um valor pouco maior em div.adjusted para o fundo do que para a altura da barra inferior, senão a barra de rolagem vertical aparece, eu ajustei para ser o valor mais próximo.

Essa diferença é porque um dos elementos da área dinâmica está adicionando um furo extra que eu não sei como me livrar … é uma tag de vídeo (HTML5), por favor note que eu coloquei essa tag de vídeo com esse css ( então não há razão para fazer um buraco no fundo, mas faz):

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

O objective: Ter um vídeo que tire o 100% do navegador (e redimensione dinamicamente quando o navegador for redimensionado, mas sem alterar a proporção) menos um espaço no fundo que eu use para um div com alguns textos, botões, etc. (e validadores) w3c e 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; na tag de vídeo.

Outra maneira de atingir o mesmo objective: checkboxs flexíveis . Torne o contêiner uma checkbox flexível de coluna e, em seguida, você terá toda a liberdade para permitir que alguns elementos tenham tamanho fixo (comportamento padrão) ou seja preenchido / encolhido 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; } 

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

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

  flex:1 1 auto; 

Não tenho certeza se isso funciona em sua situação particular, mas descobri que o preenchimento no div interno empurra o conteúdo dentro de um div se o div contido for um tamanho fixo. Você teria que flutuar ou posicionar absolutamente seu elemento de header, mas por outro lado, eu não tentei isso para divs de tamanho variável.

Intereting Posts