Breaking

Post Top Ad

Your Ad Spot

lunes, 18 de marzo de 2019

Cómo hacer una altura de div 100% de la ventana del navegador

Tiene dos div en HTML, uno está alineado en el lado izquierdo y otro está alineado en el lado derecho. Ahora desea configurarlos para que se ajusten a pantalla completa en la ventana del navegador. Además, necesita que ambas div divisiones siempre sean del 100% de la ventana del navegador, ya sea que tenga algún contenido o no. Este estilo es muy útil cuando el menú de navegación se muestra en el lado izquierdo y el contenido de la página en el lado derecho. Puedes hacer un div 100% de la altura de la ventana fácilmente usando CSS o jQuery.
La página web HTML es como la siguiente.
< div  class = "container" >
  < div  class = "div1" >
    < ul >
        < li > Menú1 </ li >
        < li > Menú2 </ li >
        < li > Menú3 </ li >
    </ ul >
  </ div >
  < div  class = "div2" > < p > Es la sección de contenido principal. </ p > </ div >
</ div >
Inicialmente, el CSS de HTML es el siguiente.
.container { ancho :  100 % }
 .div1 {
     float :  left ;
    color de fondo :  # F5A623 ;
    ancho :  20 % ;
}
.div2 {
     float :  left ;
    color de fondo :  #FFF ;
    ancho :  80 % ;
}
Primera solución con CSS:
Reemplace el div1div2CSS con el siguiente CSS.
.div1 {
     float :  left ;
    color de fondo :  # F5A623 ;
    ancho :  20 % ;
    posición :  absoluta ;
    arriba :  0 ;
    abajo :  0 ;
}
.div2 {
     float :  left ;
    color de fondo :  #FFF ;
    ancho :  80 % ;
    posición :  absoluta ;
    arriba :  0 ;
    abajo :  0 ;
    izquierda : 21 % ;
}
Segunda solución con jQuery:
use el siguiente jQuery con el CSS inicial.
$ ( function () {
     $ ( '.div1, .div2' ) .css ({height: $ ( window ). innerHeight ()});
     $ ( window ) .resize ( function () {
         $ ( '.div1, .div2 ' ) .css ({altura: $ ( ventana ). innerHeight ()});
    });
});

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas