Radzenie sobie z paskami przewijania i jquery .width() metoda

Question

jQuery's .width() metoda nie wydaje się uwzględniać paski przewijania. Jest to dla mnie problematyczne, ponieważ chciałbym ustawić szerokość niektórych dzieci równą szerokości ich rodzica. Kiedyś jQuery podobny do następującego:

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

W tym przykładzie #contentDiv jest elementem Chciałbym wielkość i chcę, aby ustawić go mieć szerokość #containerDiv, który jest jego elementem dominującym. Moim problemem jest to, że odcina stronie #contentDiv, jak widać na this fiddle.

W moim rzeczywisty kod, mam kilka elementów, które ja zaklejające z jQuery, które wszyscy musimy zmieścić się w przewijanej div, więc po prostu ustawienie css od #contentDiv do 100% nie jest opcją. Jaki jest najlepszy sposób radzenia sobie z szerokościami paska przewijania elementów div w jQuery?

Answer 1

Najlepszym rozwiązaniem znalazłem podczas pracy wokół tego rozwiązania to:

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

jQuery jest wszechmocny i wszystko, ale czasami mała kreska rodzimej JS jest wszystko, czego potrzeba do renderowania pikseli doskonałych stron. .. Mam nadzieję, że to rozwiązanie okaże się pomocne!

Answer 2

AKTUALIZACJA:

Żadna z metod szerokości rozpoznawczej jQuery stanowią paska przewijania. W moim oryginalnym przykładzie użycie LOOKS wygląda tak, jakby działało, ale tylko dlatego, że zwraca i obiekt, co powoduje niepowodzenie width, a rozmiar wewnętrznej zawartości zmieści się w dostępnej przestrzeni, ponieważ przykład nie był zbyt dobry. Jednak możliwe jest napisanie funkcji obliczającej dostępne miejsce w div z paskiem przewijania w nim, który następnie może być użyty do ustawienia zawartości, jak chcesz.

Aby napisać tę funkcję, skorzystałem z faktu, że gdy element div jest dołączony do elementu div z paskiem przewijania w nim, przyjmuje on pełną dostępną szerokość (tj. Wewnętrzną szerokość elementu nadrzędnego minus szerokość paska przewijania).

Funkcja wygląda następująco:

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

    div.append(measureDiv); 

    var width = measureDiv.outerWidth(); 

    measureDiv.remove(); 

    return width 
}; 

I wtedy wykorzystać do wielkości moje treści Div:

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

Working fiddle.

Answer 3

Spróbuj:

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

Dla mor e informacje na temat tego rozwiązania, patrz: this StackOverflow answer.

Answer 4

Innym podejściem, które chciałbym spróbować, jest ustawienie obu elementów 'box-sizing property na' border-box 'i sprawdzenie, czy ustawienie wartości contentDiv na 100% działa tak, jak chcesz.

Teraz, gdy mniej projektów martwi się o stare, stare przeglądarki, "skrzynka" może ułatwić pracę. Pamiętaj jednak o testowaniu wielu przeglądarek na wielu platformach, ponieważ nie jestem pewien, czy wszystkie obsługują paski przewijania w ten sam sposób.