CSS Div esticar 100% da altura da página

195

Eu tenho uma barra de navegação no lado esquerdo da minha página e quero que ela se estenda para 100% da altura da página. Não apenas a altura da janela de exibição, mas incluindo as áreas ocultas até você rolar. Não quero usar javascript para fazer isso.

Isso pode ser feito em HTML / CSS?

css height max stretch Tom
fonte

Respostas:

171

Aqui está a solução que finalmente encontrei ao usar uma div como um contêiner para um plano de fundo dinâmico.

  • Remova z-indexpara usos não em segundo plano.
  • Remova leftou rightpara uma coluna de altura total.
  • Remova topou bottompara uma linha de largura total.

EDIT 1: O CSS abaixo foi editado porque não foi exibido corretamente no FF e no Chrome. movido position:relativepara estar no HTML e definir o corpo para em height:100%vez de min-height:100%.

EDIT 2: Adicionados comentários extras ao CSS. Adicionadas mais algumas instruções acima.

O CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

O html:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

Por quê?

html{min-height:100%;position:relative;}

Sem isso, o DIV do contêiner na nuvem é removido do contexto de layout do HTML. position: relativegarante que o DIV permaneça dentro da caixa HTML quando é desenhado, de modo que bottom:0se refira à parte inferior da caixa HTML. Você também pode usar height:100%o contêiner na nuvem, pois agora se refere à altura da tag HTML e não à porta de visualização.

Knyri
fonte
isso é ótimo, mas não vai centrar. alguma correção para isso? margem: 0 automático; não está funcionando.
Cream
Resposta incrível. Notei que você precisa usar min-height (e não apenas height) no htmlelemento. Por que é que?
precisa saber é o seguinte
Usar heightestá dizendo 'você é tão alto; nem mais nem menos. O que significa que será a altura da janela de exibição. Queremos que ele seja pelo menos tão alto quanto a janela de exibição ou mais alto. min-heightfaz isso muito bem.
Knyri 28/09/2013
1
O z-index está lá porque esse é um trecho de um plano de fundo em movimento que eu fiz e queria ter certeza de que a div permanecesse em segundo plano. Não é necessário para elementos normais.
Knyri
5
Isto e excelente. Trabalho com CSS há 15 anos e nunca clicou que o <html>posicionamento na viewport e o posicionamento na viewport eram duas coisas distintas. Obrigado!
Ben Hull
80

Com o HTML5, a maneira mais fácil é simplesmente fazer height: 100vh. Onde 'vh' significa altura da janela de exibição da janela do navegador. Responsivo ao redimensionamento do navegador e dos dispositivos móveis.

alchuang
fonte
39
Perdendo completamente o ponto. O OP está pedindo a altura da página, não a altura da janela / janela de visualização.
Greg
9
Altura do documento, não altura da janela de exibição.
punkbit
7
mesmo comentário acima
ericn 26/02
11
Apressei-me a interpretar mal a pergunta e achei esta resposta útil. Obrigado por cometer o mesmo erro que cometi, mas agora gostaria de sugerir que esta resposta seja alterada para incluir essa ressalva.
Durette
By the way, eu procurei, há também vw.
Aaron Franke
14

Eu tive um problema semelhante e a solução foi fazer isso:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

Eu queria uma div centrada na página com altura de 100% da altura da página, então minha solução total foi:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

Pode ser necessário fazer com que um elemento pai (ou simplesmente 'corpo') tenha position: relative;

Nate Barr
fonte
16
Por que todo mundo está chamando isso de cloud-container?
Wilf 17/02
Essa é boa! Ignorar a fixação da altura é uma ideia brilhante, na verdade, e eu ainda não notei nenhum bug. Adoro. BEIJO ! Obrigado pela gorjeta!
Daneczech 18/05
13

Você pode trapacear usando Faux Columns ou pode usar alguns truques CSS

Ryan Doherty
fonte
1
Observe que as artimanhas do CSS geram colunas de altura iguais, mas não colunas de 100%.
Thedz 03/04/09
Se a barra de navegação se expandir para a altura do conteúdo, que determina a altura da página, ela fornecerá 100% de altura.
21911 Ryan Doherty
1
-1 por não fornecer uma maneira 100% segura de garantir que a barra de navegação esteja sempre alta o suficiente.
Aaron Digulla 12/12
link morto: ((((
JBis
9

É simples usando uma tabela:

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

Quando o DIV foi introduzido, as pessoas tinham tanto medo das mesas que o pobre DIV se tornou o martelo metafórico.

Aaron Digulla
fonte
6
Embora os DIVs e os estilos fluidos sejam ótimos, acho que o CSS ainda falha em capturar a essência do layout da tela da mesma maneira que TABLE alcança a essência do layout da tabela. ... E o layout da tabela ainda é uma maneira aceitável de fazer as coisas.
Jeff Meatball Yang
8
As tabelas são destinadas a dados tabulares, não ao layout da página. Dito isto, o CSS tem algumas falhas importantes quando se trata da antiga questão de 100% de altura. Tenho que admitir que usei essa solução em um prazo apertado, mas sempre senti que estava desistindo.
Scott Greenfield
6
@ Scott: Uma vez perdi três semanas tentando obter um design com 100% de altura nos três principais navegadores. Eu realmente não consigo mais ouvir as besteiras "as mesas são más" :-( Mesmo com meu conhecimento, o uso de DIVs é muito complicado.
Aaron Digulla
1
O planejamento adequado garante que nenhuma dependência nas tabelas seja necessária. Agora, em 2012, com a indústria como um todo ultrapassando o IE6 / 7, aconselho vivamente a não usar tabelas com 100% de altura!
Vael Victus
4
Você não precisa usar <table>; pode usar <div style = "display: table;" : D
Wilf 17/02
8

Use a posição absoluta. Observe que não é assim que geralmente estamos acostumados a usar a posição absoluta, o que requer a disposição manual das coisas ou a exibição de diálogos flutuantes. Isso será esticado automaticamente quando você redimensionar a janela ou o conteúdo. Eu acredito que isso requer o modo de padrões, mas funcionará no IE6 e acima.

Apenas substitua a div pelo id 'thecontent' pelo seu conteúdo (a altura especificada existe apenas para ilustração, você não precisa especificar uma altura no conteúdo real.

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

A maneira como isso funciona é que a div externa atua como um ponto de referência para a barra de navegação. A div externa é esticada pelo conteúdo da div 'content'. A barra de navegação usa posicionamento absoluto para se esticar até a altura do pai. Para o alinhamento horizontal, fazemos com que a div de conteúdo se desloque pela mesma largura da barra de navegação.

Isso é muito mais fácil com o modelo de caixa flexível CSS3, mas ainda não está disponível no IE e possui algumas de suas próprias peculiaridades.

tstanis
fonte
Olá tstanis, testei no IE6 e a barra de navegação não esticou . No FireFox, Chrome, ele funciona muito embora.
Lucas Pottersky
No IE6, use uma tabela ou JavaScript ou uma opção de navegador, a menos que você tenha feito isso uma dúzia de vezes antes.
Aaron Digulla
6

Encontrei o mesmo problema que você. Eu queria fazer um DIVcomo pano de fundo, porque, porque é fácil manipular div através de javascript. Enfim, três coisas que fiz no css para essa div.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
Talha
fonte
6

Se você está direcionando navegadores mais modernos, a vida pode ser muito simples. experimentar:

.elem{    
    height: 100vh;
 }

se você precisar em 50% da página, substitua 100 por 50.

Adam Boostani
fonte
3
Isso pressupõe que a altura da página seja igual à altura da tela. Uma página geralmente pode ser muito maior que a altura da tela, por isso, rolamos para baixo.
TidyDev 24/11/19
5

Quero cobrir toda a página da web antes de solicitar um pop-up modal. Eu tentei muitos métodos usando CSS e Javascript, mas nenhum deles ajuda até descobrir a solução a seguir. Funciona para mim, espero que ajude você também.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
			    margin: 0px 0px;
			    height 100%;
			}
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
		</style>
		<script>
		
			// Polling for the sake of my intern tests
			var interval = setInterval(function() {
				if(document.readyState === 'complete') {
					clearInterval(interval);
					isReady();
				}    
			}, 1000);
			
			function isReady() {
				document.getElementById('btn1').disabled = false;
				document.getElementById('btn2').disabled = false;
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			}
			
			function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
				
				// enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
		</script>
		
	</head>
	<body id="body">
		<div id="div1" class="full-page">
			<div class="avoid-content-highlight">
                
            </div>
		</div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
		<div id="demo">
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
		</div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
	</body>
</html>
Expandir snippet

Boa sorte ;-)

Chong Chern Dong
fonte
2 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
Swadesh Behera
fonte
1 

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>
Expandir snippet

reaw_ni
fonte
Por favor, adicione um pouco de explicação para sua resposta, mostrando o que ele faz e como ele resolve o problema
Our Man in Bananas
div "page" 100% de altura em qualquer plataforma. basta copiar o script js na tag <script> </script> e colar no código HTML.
reaw_ni
0

Simples, basta envolvê-lo em uma div ...

O HTML:

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

O CSS:

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>
Steffan Perry
fonte