Ridimensionare dinamicamente div in base alla dimensione della finestra del browser

Sto cercando di capire come avere un div ridimensionarlo in modo dinamico, in base alla dimensione della finestra del browser. Ho installato un jsbin che illustra il mio problema, qui: http://jsbin.com/uxomul Ridimensionare dinamicamente div in base alla dimensione della finestra del browser

Quello che voglio fare è quello di ridimensionare il div che contiene le immagini in modo che il div riempie sempre ciò che resta della altezza della finestra del browser (tranne un margine di 25px in basso, impostato sul corpo).

Ecco una demo che forse illustra ciò che voglio raggiungere in modo più chiaro: http://emilolsson.com/shop/demo/layers

Tutte le idee che sarebbe il modo migliore per affrontare questo?

fonte

2012-01-03 INT

si può fare qualcosa di simile:

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

25 è solo un numero di campione, ad esempio, il margine (si può ottenere questo in modo dinamico troppo)

Si potrebbe anche voler avvolgere in una funzione e chiamare questo su entrambe le pagine caricare e ridimensionare

fonte

2012-01-03 19:30:20 Andre

funziona perfettamente, non pensava che stava andando essere così facile, grazie! Edit: Realizzato ora che ho bisogno di usare -120 invece di -25, perché è così? http://jsbin.com/afokor – INT

Probabilmente ci sono altre cose che non hai preso in considerazione, come bordi, paddings, margini del corpo, ecc. Se conosci tutti gli elementi di cui hai bisogno, puoi usare 'jQuery (elemento) .outerWidth (true) 'su ogni – Andre

Impostazione larghezza tramite $ (elemento) .attr ('larghezza', 100) imposterà il valore della larghezza, ma non ridimensionerà l'elemento sulla chiamata. Merita una menzione. Puoi anche usare $ ('elemento'). Css ('width', '100px') che ridimensiona l'elemento quando viene chiamato. – NuclearPeon

È possibile provare a collegarsi all'evento di ridimensionamento della finestra del browser.

Ad esempio:

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

fonte

2012-01-03 19:25:11 scripto

Usa la posizione CSS: assoluta/relativa in combinazione con CSS alto/basso/sinistra/destra. Esempio:

<!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>

fonte

2012-01-03 20:54:42

Hm, l'ho provato sia localmente che su jsbin (non che avrebbe fatto alcuna differenza) ma non sembra funzionare? http://jsbin.com/oxeqok – INT

Funziona localmente per Chrome, FF, IE 7+, Safari e Opera. L'esempio mostra tre sezioni: Testa, Barra laterale e Contenuto. Sia la barra laterale che il contenuto riempiono la pagina orizzontalmente (meno un margine inferiore di 25px). La testa ha un'altezza di 100 px e la barra laterale ha una larghezza di 200 px. Il contenuto riempie l'area rimanente e ha barre di scorrimento per semplicità, anche se è possibile implementare effetti di scorrimento personalizzati simili a quelli di una diapositiva (come nel tuo esempio). Cosa vedi? –

La posizione deve essere fissa in modo che venga ridimensionata automaticamente.

Se l'altezza dello schermo è cambiato in fase di esecuzione

Mettere questo in lamiera CSS:

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

fonte

2015-11-02 11:36:39 Tarek

Non sono sicuro che funzioni universalmente. . . –

Ridimensionare dinamicamente div in base alla dimensione della finestra del browser

risposta

Problemi correlati