CSS Como definir a altura da div 100% menos nPx

199

Eu tenho uma div wrapper que contans 2 divs ao lado do outro. Acima deste contêiner, tenho uma div que contém meu cabeçalho. A div do wrapper deve ser 100% menos a altura do cabeçalho. O cabeçalho tem cerca de 60 px. Isso está consertado. Então, minha pergunta é: como faço para definir a altura da div do meu wrapper como 100% menos os 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

css height

— Martijn
fonte

16

Eu realmente gostaria que o w3c considere adicionar algum valor menos a propriedade constante à largura, eles esqueceram de incluir as bordas na largura, mas deveriam ter mudado a definição que a maioria dos hacks CSS desapareceria se essas duas coisas estivessem disponíveis.

— Samarjit samanta

79

Aqui está um css funcional, testado no Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

O "overflow-y" não é aprovado pelo w3c, mas todos os principais navegadores oferecem suporte. Suas duas divs #left e #right exibirão uma barra de rolagem vertical se o conteúdo for muito alto.

Para que isso funcione no IE7, é necessário acionar o modo compatível com os padrões adicionando um DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
	*{margin:0px;padding:0px;overflow:hidden}
	div{position:absolute}
	div#header{top:0px;left:0px;right:0px;height:60px}
	div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
	div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
	div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

Expandir snippet

— Alsciende
fonte

Funciona no FF, mas não o trabalho no IE7. Eu vejo apenas o código 'Header': <div id = "header"> Cabeçalho </div> <div id = "wrapper"> <div id = "left"> Esquerdo </div> <div id = "right"> Certo </div> </div>

— Martijn

Você acionou o modo compatível com os padrões? Vou adicionar um exemplo de página na minha resposta.

— Alsciende

1

Além disso, se você precisar posicionar essas divs no meio da página ou em qualquer outro lugar, envolva-as em uma div de contêiner e defina position: relative-as. Em seguida, coloque o contêiner em qualquer lugar da página.

— Mrchief 30/07/11

e div interno, dentro de #left, por exemplo, se eu quiser 2 divs com alturas respectivas de 40% e 60%?

— TecHunter 16/10

Existe um motivo específico para o motivo pelo qual o px foi especificado nos parâmetros do valor 0?

— Cassandra

274

No CSS3 você pode usar

height: calc(100% - 60px);

— libjup
fonte

25

Verifique se você tem espaço antes e depois do sinal "-". O Firefox precisa ter espaço antes do sinal "-".

— Codler

7

perfeito. eu não sabia que CSS3 poderia fazer isso.

— Tom Beech

Uau! exatamente o que eu queria. Obrigado.

— Sandhu

1

Isso é fantástico

— Mirko

47

Se você precisar oferecer suporte ao IE6, use JavaScript para gerenciar o tamanho da div do wrapper (defina a posição do elemento em pixels após ler o tamanho da janela). Se você não deseja usar JavaScript, isso não pode ser feito. Existem soluções alternativas, mas esperamos que uma ou duas semanas o façam funcionar em todos os casos e em todos os navegadores.

Para outros navegadores modernos, use este css:

position: absolute;
top: 60px;
bottom: 0px;

— Aaron Digulla
fonte

O site é compatível apenas com o IE 7. Quando uso altura: 100% e superior: 60px; Eu ainda tenho uma barra de rolagem. Eu posso rolar 60px para baixo.

— 28709 Martijn

4

Não especifique uma altura, use as partes superior e inferior e deixe o navegador calcular a altura.

— Aaron Digulla

Mas quero que minha página tenha uma altura máxima de 100% menos 60px; Se o conteúdo for maior que isso, desejo barras de rolagem na div usando overflow: scroll;

— 28709 Martijn

4

Para uma barra de rolagem, adicione uma div dentro do wrapper que o preencha completamente e faça esse estouro: scroll;

— Aaron Digulla

Observe que, devido a erros no IE7, isso ainda pode falhar. Se você não conseguir fazê-lo funcionar, use JavaScript. Eu sei, você não gosta, mas pesa contra uma semana de trabalho lutando com bugs estranhos.

— Aaron Digulla

6

grande ... agora eu parei de usar% he he he ... exceto para o recipiente principal, como mostrado abaixo:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

e aqui está o css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

Eu testei isso em todos os navegadores conhecidos e está funcionando bem. Existem algumas desvantagens dessa maneira?

— Jayaveer
fonte

4

Você pode fazer algo como height: calc (100% - nPx); por exemplo altura: calc (100% - 70px);

— DrB
fonte

2

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Certifique-se de usar menos

height: ~calc(100% - 60px);

Caso contrário, menos não será compilado corretamente

— Dadhich Sourav
fonte

0

Isso não responde exatamente à pergunta apresentada, mas cria o mesmo efeito visual que você está tentando obter.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

— Noel Walters
fonte

0

Neste exemplo, você pode identificar áreas diferentes:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

— Renzo Ciot
fonte

0

Ainda não vi nada assim publicado, mas pensei em publicá-lo.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Então CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Aqui está um jsfiddle de trabalho

Nota: Não tenho ideia de qual é a compatibilidade do navegador para isso. Eu estava apenas brincando com soluções alternativas e isso parecia funcionar bem.

— FreedomMan
fonte

-1

Use uma div de invólucro externo definida como 100% e, em seguida, sua div de invólucro interno 100% deve ser agora relativa a isso.

Eu tinha certeza de que isso costumava funcionar para mim, mas aparentemente não:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

— Cade Roux
fonte

Pode dar um exemplo disso. Eu não entendo #

— Martijn

Postei o que estava pensando, mas não consigo fazê-lo funcionar tão cedo / tarde. Talvez se eu dormir um pouco mais.

— Cade Roux

-1

Se você não deseja usar posicionamento absoluto e todo esse jazz, aqui está uma correção que eu gosto de usar:

seu html:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

seu css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

— scotsqueakscoot
fonte

1

Eu não acho que isso funcione como esperado. Primeiro #headerdeveria ser margin-top:-60px;. Segundo, height:100%significa que a altura será 100% da altura dos elementos pai, sem incluir margens, preenchimento e bordas. Dependendo das configurações de rolagem, isso fará com que as barras de rolagem apareçam ou o conteúdo seja cortado.

— Kylos