2011-11-15 18 views
20

Sto avendo un problema identico a questo manifesto: Jquery problem with height() and resize()JQuery: altezza dinamica() con finestra di ridimensionamento()

Ma la soluzione non risolve il mio problema. Ho tre div stacked e voglio usare JQuery per fare in modo che quello centrale regoli in altezza al 100% dell'altezza della finestra, meno l'altezza (23px * 2) dell'altro superiore & div bottom. Funziona su ridimensionamento, ma è spento (breve) di 16px quando il documento inizialmente viene caricato.

HTML

<body> 
<div id="bg1" class="bg">top</div> 
<div id="content"> 
    help me. seriously. 
</div> 
<div id="bg2" class="bg">bottom</div> 
</body> 

CSS

html, 
body { 
    width:100%; 
    height:100%; 
} 

.bg { 
width:315px; 
height:23px; 
margin:0 auto; 
text-indent:-9000px; 
} 

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;} 
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;} 

#content { 
width:450px; 
margin:0 auto; 
text-align: center; 
} 

JQuery

$(document).ready(function(){ 
    resizeContent(); 

    $(window).resize(function() { 
     resizeContent(); 
    }); 
}); 

function resizeContent() { 
    $height = $(window).height() - 46; 
    $('body div#content').height($height); 
} 
+0

Io che cerchi qualcosa del genere? O il piè di pagina dovrebbe muoversi con la pagina? http://www.cssplay.co.uk/layouts/basics2.html Un violino sarebbe bello! – mrtsherman

+0

Potrei fare qualcosa del genere, ma sono bloccato con l'HTML che verrà generato sul lato server. Mi è stato chiesto di risolvere questo tipo di problema con JQuery. – Gregir

+0

Che cos'è il rientro del testo 9000px? – mrtsherman

risposta

50

Mi sembra che non ci dovrebbe essere una soluzione javascript, ma come è?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() { 
    $('#content').height($(window).height() - 46); 
}); 

$(window).trigger('resize'); 
+0

In realtà, è possibile farlo in una singola riga. Ancora più corto! – mrtsherman

+0

Questo ha fatto il trucco, abbastanza stranamente. Grazie. – Gregir

+0

https://jsfiddle.net/53hoq9w7/ – Pierre

0

Per visualizzare l'altezza della finestra mentre (o dopo) viene ridimensionato, provare:

$(window).resize(function() { 
$('body').prepend('<div>' + $(window).height() - 46 + '</div>'); 
}); 
6

Ok, che ne dite di una risposta CSS! Usiamo display: table. Quindi ognuna delle div è una riga, e infine applichiamo l'altezza del 100% a "riga" centrale e voilà.

http://jsfiddle.net/NfmX3/3/

body { display: table; } 
div { display: table-row; } 
#content { 
    width:450px; 
    margin:0 auto; 
    text-align: center; 
    background-color: blue; 
    color: white; 
    height: 100%; 
} 
+0

Man! Sapevo che c'era una soluzione solo CSS! Mi hai ispirato. Ragazzi, preferite questa soluzione non JS prima di qualsiasi JS. Non è così pulito e potrebbe essere necessario utilizzare un extra mark-up, ma comunque ne vale la pena. –

+0

Perché le persone pensano che i CSS siano sempre meglio di JS? – barell

+0

@barell Non è sempre meglio, ma per quanto riguarda la presentazione è generalmente preferibile utilizzare lo stile da solo, invece di implementare anche il comportamento/logica. Un ulteriore vantaggio è che il CSS è resiliente per la progettazione, mentre JavaScript è fragile per la progettazione. –

3

la soluzione più pulita - anche puramente CSS - sarebbe utilizzando calc e vh.

altezza del div centrale sarà calcolato nel seguente modo:

#middle-div { 
height: calc(100vh - 46px); 
} 

Cioè, 100% dell'altezza viewport meno il 2 * 23px. Ciò garantisce che la pagina venga caricata correttamente ed è dinamica (demo here).

Ricordarsi inoltre di usare il ridimensionamento della scatola, in modo che i bordi e le imbottiture non riempiano la finestra di visualizzazione.

+0

Praticamente tutti i browser attuali supportano calc (qui: http://caniuse.com/#feat=calc) E lo stesso per vh (qui: http://caniuse.com/#feat=viewport-units) –

Problemi correlati