full - CSS Div stretch 100% de altura de página
height 100 css (12)
Tengo una barra de navegación en el lado izquierdo de mi página, y quiero que se extienda al 100% de la altura de la página. No solo la altura de la ventana gráfica, sino también las áreas ocultas hasta que te desplaces. No quiero usar javascript para lograr esto.
¿Se puede hacer en HTML / CSS?
Aquí está la solución que finalmente se me ocurrió al usar un div como contenedor para un fondo dinámico.
- Elimine el
z-indexpara usos que no sean de fondo. - Retire a la
leftorightpara una columna de altura completa. - Retire
topobottompara una fila de ancho completo.
EDIT 1: El siguiente CSS se ha editado porque no se muestra correctamente en FF y Chrome. position:relative movida position:relative para estar en el HTML y configurar el cuerpo a la height:100% lugar de min-height:100% .
EDIT 2: añadidos comentarios adicionales a CSS. Se agregaron algunas instrucciones más arriba.
El 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! */
}
El html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>
¿Por qué?
html{min-height:100%;position:relative;}
Sin esto, el contenedor de nubes DIV se elimina del contexto de diseño del HTML. position: relative asegura que el DIV permanece dentro del cuadro HTML cuando se dibuja de modo que bottom:0 refiere a la parte inferior del cuadro HTML. También puede usar height:100% en el contenedor de la nube, ya que ahora se refiere al alto de la etiqueta HTML y no a la ventana gráfica.
Con HTML5, la forma más fácil es simplemente hacer la height: 100vh . Donde ''vh'' representa la altura de la ventana del navegador. Responde al cambio de tamaño de navegador y dispositivos móviles.
Es simple usando una tabla:
<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>
Cuando se introdujo DIV, la gente tenía tanto miedo a las mesas que el pobre DIV se convirtió en el martillo metafórico.
Me encontré con el mismo problema que tú. Quería hacer un DIV como fondo, porque es fácil de manipular div a través de javascript. De todos modos tres cosas que hice en el CSS para ese div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
Puede hacer trampas utilizando Faux Columns o puede usar algunos trucos de CSS
Quiero cubrir toda la página web antes de solicitar una ventana emergente modal. Probé muchos métodos con CSS y Javascript, pero ninguno me ayudó hasta que descubrí la siguiente solución. Funciona para mí, espero que te ayude también.
<!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>
Buena suerte ;-)
Si se dirige a navegadores más modernos, la vida puede ser muy simple. tratar:
.elem{
height: 100vh;
}
si lo necesita al 50% de la página, reemplace 100 por 50.
Simple, solo envuélvelo en una tabla div ...
El HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>
El CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>
Tuve un problema similar y la solución fue hacer esto:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}
Quería un div centrado en la página con una altura del 100% de la altura de la página, por lo que mi solución total fue:
#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*/
}
Es posible que necesite hacer que un elemento principal (o simplemente ''cuerpo'') tenga una position: relative;
Use la posición absoluta. Tenga en cuenta que esta no es la forma en que generalmente estamos acostumbrados a usar la posición absoluta, lo que requiere desplegar cosas manualmente o tener diálogos flotantes. Esto se estirará automáticamente cuando cambie el tamaño de la ventana o el contenido. Creo que esto requiere el modo estándar, pero funcionará en IE6 y superior.
Simplemente reemplace el div con id ''thecontent'' con su contenido (la altura especificada es solo para ilustración, no tiene que especificar una altura en el contenido 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>
La forma en que esto funciona es que el div externo actúa como un punto de referencia para la barra de navegación. El div externo está estirado por el contenido del div ''contenido''. La barra de navegación usa el posicionamiento absoluto para estirarse a la altura de su elemento primario. Para la alineación horizontal, hacemos que el contenido div se desplace por el mismo ancho de la barra de navegación.
Esto se hace mucho más fácil con el modelo de caja flexible de CSS3, pero aún no está disponible en IE y tiene algunos de sus propios caprichos.
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>
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}