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 desplazas. No quiero usar JavaScript para lograr esto.
¿Se puede hacer en HTML / CSS?
Respuestas:
Aquí está la solución que finalmente se me ocurrió al usar un div como contenedor para un fondo dinámico.
z-indexpara usos que no sean de fondo.lefto rightpara una columna de altura completa.topo bottompara una fila de ancho completo.EDITAR 1: CSS a continuación se ha editado porque no se mostró correctamente en FF y Chrome. movido position:relativepara estar en el HTML y establecer el cuerpo en height:100%lugar de min-height:100%.
EDITAR 2: Se agregaron 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 DIV del contenedor en la nube se elimina del contexto de diseño del HTML. position: relativeasegura que el DIV permanezca dentro del cuadro HTML cuando se dibuja, de modo que se bottom:0refiere a la parte inferior del cuadro HTML. También puede usar height:100%en el contenedor de la nube, ya que ahora se refiere a la altura de la etiqueta HTML y no a la ventana gráfica.
htmlembargo, noté que tienes que usar min-height (y no solo height) en el elemento. ¿Porqué es eso?
heightes decir 'eres tan alto; Nada mas y nada menos.' Lo que significa que será la altura de la ventana gráfica. Queremos que sea al menos tan alto como la ventana gráfica o más alto. min-heighthace esto muy bien
<html>y el posicionamiento en la ventana gráfica eran dos cosas separadas. ¡Gracias!
Con HTML5, la forma más fácil es simplemente hacer height: 100vh. Donde 'vh' representa la altura de la ventana de visualización de la ventana del navegador. Responde al cambio de tamaño del navegador y los dispositivos móviles.
vw.
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 deba hacer que un elemento padre (o simplemente 'cuerpo') tenga position: relative;
cloud-container?
Puedes hacer trampa usando columnas falsas o puedes usar algunos trucos CSS
Es simple usar 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 el DIV, la gente tenía tanto miedo a las mesas que el pobre DIV se convirtió en el martillo metafórico.
Posición de uso absoluta. Tenga en cuenta que no es así como estamos acostumbrados a usar position absolute, lo que requiere un diseño manual o un diálogo flotante. 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 solo es 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 se estira por el contenido del div 'contenido'. La barra de navegación utiliza un posicionamiento absoluto para estirarse hasta la altura de su padre. Para la alineación horizontal, hacemos que el div de contenido 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 CSS3, pero aún no está disponible en IE y tiene algunas de sus propias peculiaridades.
Me encontré con el mismo problema que tú. Quería hacer un DIVfondo, por qué, 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;
}Si está apuntando 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.
Quiero cubrir toda la página web antes de que aparezca una ventana emergente modal. Probé muchos métodos usando CSS y Javascript, pero ninguno de ellos ayuda hasta que descubro la siguiente solución. Funciona para mí, espero que también te ayude.
<!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 ;-)
* {
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>Simple, simplemente 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>