cambiar dinámicamente el tamaño div en función del tamaño de la ventana del navegador

Estoy tratando de encontrar la manera de tener un div cambiar el tamaño de forma dinámica, en función del tamaño de la ventana del navegador. He creado un jsbin que ilustra mi problema, aquí: http://jsbin.com/uxomul cambiar dinámicamente el tamaño div en función del tamaño de la ventana del navegador

Lo que quiero hacer es cambiar el tamaño del div que contiene las imágenes de modo que el div siempre llena lo que queda de la altura de la ventana del navegador (excepto un margen de 25px en la parte inferior, eso está establecido en el cuerpo).

He aquí una demostración de que tal vez ilustra lo que quiero lograr con mayor claridad: http://emilolsson.com/shop/demo/layers

Alguna idea de lo que sería la mejor manera de abordar esto?

Fuente

2012-01-03 INT

se puede hacer algo como esto:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 es sólo un número de muestra, por ejemplo, su margen (que puede obtener esta dinámica también)

también puede envolver en una función y llamar a esto en tanto la carga de la página y cambiar el tamaño de

Fuente

2012-01-03 19:30:20 Andre

funciona perfectamente, no pensaron que iba a ser tan fácil, gracias! Editar: me di cuenta ahora que necesito usar -120 en vez de -25, ¿por qué? http://jsbin.com/afokor – INT

Probablemente hay otras cosas que usted no ha tenido en cuenta, al igual que las fronteras, rellenos, los márgenes del cuerpo, etc. Si conoces a todos los elementos que necesita, puede usar jQuery (elemento de ') .outerWidth (verdadero) 'en cada ancho de – Andre

Ajuste a través $ (elemento) .attr ('ancho', 100) establecerá el valor de ancho, pero no cambiar el tamaño del elemento de la llamada. Vale la pena mencionarlo También puede utilizar los $ ('elemento'). Css ('width', '100px') que no cambie el tamaño del elemento cuando se le llama. – NuclearPeon

Usted puede tratar de obligar al evento de cambio de tamaño de la ventana del navegador.

Por ejemplo:

window.onresize = function() { 
//your code 
}

Fuente

2012-01-03 19:25:11 scripto

Use la posición CSS: absoluta/relativa en combinación con CSS arriba/abajo/izquierda/derecha. Ejemplo:

<!doctype html> 
<html> 
    <head> 
     <style> 
      html, body { margin:0; padding:0; width:100%; height:100%; } 

      #head   { width:100%; height:100px; background:black; color:white; } 
      #head > h1 { margin:0; } 

      #body   { position:absolute; width:100%; top:100px; bottom:25px; background:red; } 
      #body > div { position:absolute !important; } 
      #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } 
      #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } 
      #body-content > img { margin:25px; width:500px; vertical-align:middle; } 
     </style> 
    </head> 

    <body> 

     <!-- Head --> 
     <div id="head"> 
      <h1>Header</h1> 
     </div> 

     <!-- Body --> 
     <div id="body"> 

      <!-- Sidebar --> 
      <div id="body-sidebar"> 
       <h2>Sidebar</h2> 
      </div> 

      <!-- Content --> 
      <div id="body-content"> 
       <h2>Content</h2> 
       <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> 
      </div> 

     </div> 

    </body> 
</html>

Fuente

2012-01-03 20:54:42

Hm, probé esto tanto localmente como en jsbin (no es que eso hiciera ninguna diferencia) pero parece que no funciona? http://jsbin.com/oxeqok – INT

Funciona para mí localmente en Chrome, FF, IE 7+, Safari y Opera. El ejemplo muestra tres secciones: Head, Sidebar y Content. Tanto la barra lateral como el contenido ocupan la página horizontalmente (menos un margen inferior de 25 píxeles). La cabeza mide 100 píxeles de alto y la barra lateral tiene 200 píxeles de ancho. El contenido ocupa el área restante y tiene barras de desplazamiento para simplificar, aunque en su lugar podría implementarse efectos de desplazamiento similares a los de una presentación de diapositivas (como en su ejemplo). ¿Que ves? –

La posición debe ser fija para que cambie de tamaño automáticamente.

Si altura de la pantalla cambia en tiempo de ejecución

Pon esto en la hoja CSS:

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

Fuente

2015-11-02 11:36:39 Tarek

No estoy seguro de que esto funcione universalmente. . . –

cambiar dinámicamente el tamaño div en función del tamaño de la ventana del navegador

Respuesta

Cuestiones relacionadas