Gestione delle barre di scorrimento e metodo jquery .width()

Question

Il metodo jQuery .width() non sembra tenere conto delle barre di scorrimento. Questo è problematico per me, dal momento che mi piacerebbe impostare la larghezza di alcuni bambini per eguagliare la larghezza del loro genitore. Ho usato jQuery simile al seguente:

$('#contentDiv').width($('#containerDiv').width()) 

In questo esempio, #contentDiv è l'elemento che vorrei dimensioni, e voglio impostarlo per avere la larghezza di #containerDiv, che è il suo elemento genitore. Il mio problema è che questo taglia fuori il lato della #contentDiv, come si vede in this fiddle.

Nel mio codice vero e proprio, ho diversi elementi che sto dimensionamento con jQuery, cui tutti hanno bisogno per adattarsi nel div scorrevole, quindi basta impostare il css di #contentDiv al 100% non è un'opzione. Qual è il modo migliore per gestire la larghezza della barra di scorrimento delle div in jQuery?

Answer 1

La soluzione migliore che ho trovato durante il lavoro intorno a questa soluzione è questa:

http://chris-spittles.co.uk/?p=531

jQuery è onnipotente e tutto, ma a volte un piccolo pizzico di natale JS è tutto ciò che serve per visualizzare le pagine Perfect Pixel. .. Spero che troverai questa soluzione utile!

Answer 2

aggiornamento:

Nessuno dei metodi di larghezza conoscitiva jQuery rappresentano la barra di scorrimento. Nel mio esempio originale, l'utilizzo di .innerWidth(true) GUARDA come funziona, ma solo perché restituisce e oggetto, che causa l'errore width e le dimensioni del contenuto interno per adattarsi allo spazio disponibile, perché l'esempio non era molto buono. Tuttavia, è possibile scrivere una funzione per calcolare lo spazio disponibile in un div con una barra di scorrimento al suo interno, che può quindi essere utilizzata per posizionare i contenuti come si desidera.

Per scrivere quella funzione, ho approfittato del fatto che, quando un div è aggiunto a un div con una barra di scorrimento, occupa l'intera larghezza disponibile (cioè la larghezza interna del padre meno la larghezza della barra di scorrimento).

La funzione è simile al seguente:

function noScrollWidth(div){ 
    var measureDiv = $('<div id="measureDiv">'); 

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
}; 

Ho quindi utilizzare questo per dimensioni miei contenuti div:

$('#contentDiv').width(noScrollWidth($('#containerDiv'))); 

Working fiddle.

Answer 3

Prova questa:

$('#contentDiv').width($('#containerDiv')[0].clientWidth) 

Per mor Per informazioni su tale soluzione, vedere this StackOverflow answer.

Answer 4

Un altro approccio che proverò è l'impostazione di entrambi gli elementi 'box-sizing property in' border-box ', e vedere se l'impostazione della larghezza di contentDiv al 100% funziona nel modo desiderato.

Ora che meno progetti si preoccupano dei vecchi browser più vecchi, "border-box" può semplificare le operazioni. Assicurati di provare più browser su più piattaforme, però, perché non sono sicuro che gestiscano le barre di scorrimento nello stesso modo.