Więc mam DIV#Wrapper który ma stałą szerokość. Wewnątrz tego DIV mam innego DIV#Panel który ma również stałą szerokość:

<code><div id="Wrapper">
    <p>...</p>
    <div id="Panel">Panel</div>
    <p>...</p>
</div>  
</code>

Czasami szerokość Panelu jest większa niż w przypadku Wrappera, iw takich przypadkach chciałbym rozszerzyć Wrappera za pomocą JavaScript, tak aby idealnie owinął Panel.

Demo na żywo: http://jsfiddle.net/H6rML/

Zamierzałem użyć.scrollWidth na opakowaniu, aby określić szerokość panelu. Jednak problem polega na tym, że Wrapper ma poziome wypełnienie i.scrollWidth z jakiegoś powodu obejmuje tylko lewe wypełnienie owijki. Więc:

<code>Wrapper.scrollWidth === Wrapper.LeftPadding + Panel.Width
</code>

Tak więc, biorąc pod uwagę:

<code>#Wrapper {
    width: 200px;
    padding: 10px;        
}

#Panel {
    width: 300px;
}
</code>

Wrapper.scrollWidth zwraca310px, co nie jest zbyt przydatne. Jeśli.scrollWidth nie zawierał dopełnienia i zwrócił tylko szerokość Panelu, mogłem z tym pracować (dodawałbym dopełnienie ręcznie do tej wartości). Gdyby oba paddings były włączone, mógłbym z tym pracować. Ale dlaczego w komplecie jest tylko lewe wypełnienie? (Przy takim zachowaniu wydaje się, że jest to przeglądarka krzyżowa).

Kilka dodatkowych uwag:

Nie mogę ustawić szerokości na opakowaniu bezpośrednio. W moim rzeczywistym kodzie ustawiam szerokość elementu nadrzędnego, który jest kilka poziomów powyżej Opakowania, i używam niestandardowego interfejsu API, aby ustawić szerokość. Dlatego muszę odzyskać pełne320px wartość.

Chciałbym rozwiązania, które nie zależy od zawartości Wrappera. W moim demo jest to Panel, ale w innych scenariuszach może istnieć inny element, który przepełnia, a nawet wiele elementów. Dlatego poszedłem z.scrollWidth na opakowaniu.

Czy istnieje sposób na uzyskanie wartości320px bez konieczności ręcznego dodawania prawego dopełnienia do.scrollWidth wartość?

Btw, zgodnie ze standardem, należy uwzględnić odpowiednie dopełnienie:

Atrybut scrollWidth musi zwrócić wynik wykonania tych kroków:

Jeśli element nie ma żadnego powiązanego pola układu CSS, zwróć zero i zakończ te kroki.

Jeśli element jest elementem głównym, a Dokument nie jest w trybie dziwactwa, zwracaj max (szerokość treści dokumentu, wartość innerWidth).

Jeśli elementem jest element treści HTML, a Dokument jest w trybie dziwactwa, zwróć max (szerokość treści dokumentu, wartość innerWidth).

Zwraca obliczoną wartość właściwości „padding-left”, plus obliczoną wartość „padding-right”, plus szerokość zawartości elementu.

Źródło:http://www.w3.org/TR/cssom-view/

Dlaczego przeglądarki nie zachowują się odpowiednio?

Aby jeszcze bardziej poprawić przejrzystość mojego posta, pozwól, że podsumuję dwa główne pytania:

(1) Jeśli standard stwierdza, że ​​właściwe dopełnienie powinno być uwzględnione w.scrollWidth wartość, więc dlaczego przeglądarki nie zachowują się odpowiednio?

(2) Czy możliwe jest odzyskanie prawidłowej wartości (320px w moim przypadku), bez konieczności ręcznego dodawania odpowiedniego dopełnienia?

Na to pytanie udzielono odpowiedzi w innym wątku

Odpowiedź na to pytanie znajduje się tutaj:Kiedy element podrzędny przepełnia się poziomo, dlaczego właściwe dopełnienie rodzica jest ignorowane?

​