Cómo hacer que la altura de la página web se ajuste a la altura de la pantalla

Necesito hacer que la altura de mi página web se ajuste a la altura del tamaño de la pantalla sin desplazarme.Cómo hacer que la altura de la página web se ajuste a la altura de la pantalla

HTML

<body> 
    <form id="form1" runat="server"> 
    <div id="main"> 
     <div id="content"> 

     </div> 
     <div id="footer"> 

     </div> 
    </div> 
    </form> 
</body>

CSS

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;} 
#footer{width:100%;background-color:#666666;height:200px;}

Fuente

2012-08-08 Joshua

duplicado posible de [Hacer div altura de 100% de la ventana del navegador] (https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) –

Una solución independiente rápida, no elegante, pero trabajar con CSS en línea y sin requisitos jQuery. AFAIK también funciona desde IE9.

<body style="overflow:hidden; margin:0"> 
    <form id="form1" runat="server"> 
     <div id="main" style="background-color:red"> 
      <div id="content"> 

      </div> 
      <div id="footer"> 

      </div> 
     </div> 
    </form> 
    <script language="javascript"> 
     function autoResizeDiv() 
     { 
      document.getElementById('main').style.height = window.innerHeight +'px'; 
     } 
     window.onresize = autoResizeDiv; 
     autoResizeDiv(); 
    </script> 
</body>

Fuente

2012-08-08 16:10:47 Claudix

El posicionamiento fijo hará lo que usted necesita:

#main 
{   
    position:fixed; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
}

Fuente

2012-08-08 16:00:22 Faust

Probar:

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;} 
#footer{width:100%;background-color:#666666;height:22%;}

(77% y 22% más o menos conserva las proporciones de content y footer y no debe causar desplazamiento)

Fuente

2012-08-08 16:01:01

No dar alturas exactas, pero los relativos, la adición de hasta el 100%. Por ejemplo:

#content {height: 80%;} 
    #footer {height: 20%;}

Añadir en

html, body {height: 100%;}

Fuente

2012-08-08 16:02:26 Bakabaka

¿De dónde viene la altura absoluta? 100% de 0 es 0. ¿Cómo se puede decir con qué 100% es para empezar? – nckbrz

100% es el tamaño completo (actual) de la ventana gráfica. Entonces, no lo diga, el navegador realmente determina el valor del 100% por sí mismo. – Bakabaka

Muy bien, voy a probar esto – nckbrz

puede utilizar CSS para definir el cuerpo de la etiqueta a estos ajustes:

body 
{ 
padding:0px; 
margin:0px; 
width:100%; 
height:100%; 
}

Fuente

2012-08-08 16:05:56 ram

Como otro tipo descrito here, todo lo que necesita hacer es añadir

height: 100vh;

al estilo de lo que sea necesario para llenar la pantalla

Fuente

2015-08-30 02:23:50

Cómo hacer que la altura de la página web se ajuste a la altura de la pantalla

Respuesta

Cuestiones relacionadas