Jquery sin duda alguna nos facilita la vida y esta vez con una 2 funciones basicas de dicha libreria nos brindara las la medida del alto y ancho del navegador .width() y .height() pero ahora de que sacamos el alto y el ancho? del document o window? llego a este punto y pueda que lo tengan claro pero quiero dejar esto claro para que no quede duda alguna. document nos brindara la medida de todo el contenido del html entonces no es lo que necesitamos y window nos da la medida que tiene el navegador/ browser y a fin de cuenta es toda la pantalla que muestra al abrir la pagina asi q esto si calza a nuestro requerimiento que tenemos.
listo!! entonces obtenemos el alto y ancho del navegador
width=$(window).width(); height=$(window).height(); |
ahora que hago?… ok ya tenemos el alto y ancho entonces asumimos que nuestra web tendra varias secciones para abajo y estaran en la etiqueta section. las medidas que obtuvimos debemos darle al section. ya teniendo en claro el caso crearemos una funcion que le de la medida al section.
function section() { width=$(window).width(); height=$(window).height(); $("section").width(width).height(height); } $(document).ready(function(){ section(); }) |
Con esto ya tienes todo listo para tener tu section con el alto y ancho del navegador Pero que sucede si comienzan a cambiar de tamaño? todo se veria mal y la solucion es simple pero eficaz.
$(window).resize(function(){ section(); }) |
Y es asi como tienes un codigo simple y limpio para tus desarrollos espero que te sirva este articulo.