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?
Respostas:
Aqui está a solução que finalmente encontrei ao usar uma div como um contêiner para um plano de fundo dinâmico.
z-indexpara usos não em segundo plano.leftou rightpara uma coluna de altura total.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.
htmlelemento. Por que é que?
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.
<html>posicionamento na viewport e o posicionamento na viewport eram duas coisas distintas. Obrigado!
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.
vw.
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;
cloud-container?
Você pode trapacear usando Faux Columns ou pode usar alguns truques CSS
É 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.
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.
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;
}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.
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>Boa sorte ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
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>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>