CSS Div estiramiento 100% de altura de página

195

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?

css height max stretch Tom
fuente

Respuestas:

171

Aquí está la solución que finalmente se me ocurrió al usar un div como contenedor para un fondo dinámico.

  • Eliminar el z-indexpara usos que no sean de fondo.
  • Eliminar lefto rightpara una columna de altura completa.
  • Eliminar 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.

Knyri
fuente
Esto es genial, pero no se centrará. alguna solución para eso? margen: 0 automático; no funciona
crema
Impresionante respuesta. Sin htmlembargo, noté que tienes que usar min-height (y no solo height) en el elemento. ¿Porqué es eso?
HartleySan
Usar 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
Knyri
1
El índice z está ahí porque este es un fragmento de un fondo en movimiento que hice y quería asegurarme de que el div permaneciera en el fondo. No es necesario para elementos normales.
Knyri
55
Esto es excelente. He estado haciendo CSS durante 15 años y nunca hice clic en que el posicionamiento en <html>y el posicionamiento en la ventana gráfica eran dos cosas separadas. ¡Gracias!
Ben Hull
80

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.

Alchuang
fuente
39
Perder el punto por completo. OP solicita altura de página, no altura de ventana / ventana gráfica.
Greg
9
Altura del documento, no altura de la vista.
punkbit
77
mismo comentario que el anterior
ericn
11
Apresuradamente leí mal la pregunta y encontré esta respuesta útil. Gracias por cometer el mismo error que cometí, pero ahora me gustaría sugerir que se modifique esta respuesta para incluir esa advertencia.
durette
Por cierto, lo busqué, también hay vw.
Aaron Franke
14

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;

Nate Barr
fuente
16
¿Por qué todos lo llaman cloud-container?
Wilf
Esta es buena! Ignorar la fijación de la altura es una idea brillante en realidad y todavía no noté ningún error. Quiéralo. BESO ! ¡Gracias por el consejo, hombre!
daneczech
13

Puedes hacer trampa usando columnas falsas o puedes usar algunos trucos CSS

Ryan Doherty
fuente
1
Sin embargo, tenga en cuenta que el truco css le dará columnas de igual altura, pero no columnas de 100% de altura.
thedz 03 de
Si la barra de navegación se expande a la altura del contenido, que determina la altura de la página, le dará un 100% de altura.
Ryan Doherty
1
-1 por no proporcionar una forma 100% segura de asegurarse de que la barra de navegación siempre sea lo suficientemente alta.
Aaron Digulla
enlace muerto: ((((
JBis
9

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.

Aaron Digulla
fuente
66
Si bien los DIV y los estilos fluidos son geniales, creo que CSS aún no captura la esencia del diseño de pantalla de la misma manera que TABLE logra la esencia del diseño de la tabla. ... Y el diseño de la mesa sigue siendo una forma aceptable de hacer las cosas.
Jeff Meatball Yang
8
Las tablas están destinadas a datos tabulares, no a diseño de página. Dicho esto, CSS tiene algunas deficiencias importantes cuando se trata de la antigua pregunta de 100% de altura. Tengo que admitir que he usado esta solución en un plazo muy ajustado, pero siempre sentí que me estaba rindiendo.
Scott Greenfield
66
@Scott: Una vez perdí tres semanas tratando de obtener un diseño de 100% de altura en tres de los principales navegadores. Realmente no puedo escuchar el "tablas son malos" chorrada más :-( Incluso con mis conocimientos, utilizando DIVs es demasiado complicado.
Aaron Digulla
1
Una planificación adecuada asegura que no sea necesaria la dependencia de las tablas. Ahora en 2012, con la industria en su conjunto superando el IE6 / 7, ¡recomiendo encarecidamente no usar tablas para una altura del 100%!
Vael Victus
44
No tiene que usar <table>, podría usar <div style = "display: table;" : D
Wilf
8

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.

tstanis
fuente
Hola tstanis, probé en IE6 y la barra de navegación no se estiró . Sin embargo, en Firefox, Chrome funciona mucho.
Lucas Pottersky
En IE6, use una tabla o JavaScript o un interruptor de navegador a menos que haya hecho esto una docena de veces antes.
Aaron Digulla
6

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;    
}
Talha
fuente
6

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.

Adam Boostani
fuente
3
Esto supone que la altura de la página es la misma que la altura de la pantalla. Una página a menudo puede ser mucho más larga que la altura de la pantalla, de ahí por qué nos desplazamos hacia abajo.
TidyDev
5

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>
Expandir fragmento

Buena suerte ;-)

Chong Chern Dong
fuente
2 
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
Swadesh Behera
fuente
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 fragmento

reaw_ni
fuente
agregue alguna explicación a su respuesta, que muestre lo que hace y cómo resuelve el problema
Our Man in Bananas
div "página" 100% de altura en cualquier plataforma. simplemente copie el script js en la etiqueta <script> </script> y péguelo en el código HTML.
reaw_ni
0

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>
Steffan Perry
fuente