Mam mały problem z utrzymaniem stałej szerokości moich stron .html w Chrome. Na przykład mam stronę (1) z dużą ilością treści, która przekracza wysokość widocznego obszaru (właściwe słowo?), Więc jest tam pionowy pasek przewijania na tej stronie (1). Na stronie (2) mam ten sam układ (menu, elementy div, ... itd.), Ale mniej treści, więc nie ma tam pionowych pasków przewijania.
Problem polega na tym, że na stronie (1) paski przewijania wydają się przesuwać elementy nieco w lewo (dodając do szerokości?), Podczas gdy na stronie (2) wszystko wygląda na dobrze wyśrodkowane
Wciąż jestem początkującym użytkownikiem HTML / CSS / JS i jestem przekonany, że nie jest to takie trudne, ale nie miałem szczęścia w znalezieniu rozwiązania. Działa zgodnie z przeznaczeniem na IE10 i FireFox (niezakłócające paski przewijania), spotkałem się z tym tylko w Chrome.
źródło
ZRZECZENIE SIĘ : nakładka została wycofana .
Nadal możesz tego użyć, jeśli absolutnie musisz, ale staraj się tego nie robić.
Działa to tylko w przeglądarkach WebKit , ale bardzo mi się podoba. Będzie się zachowywać jak
auto
w innych przeglądarkach.Spowoduje to, że pasek przewijania pojawi się tylko jako nakładka , nie wpływając w ten sposób na szerokość elementu!
źródło
Wystarczy, że dodasz:
W twoim pliku css, ponieważ będzie on zawierał scroller, czy jest potrzebny, czy nie, chociaż po prostu nie będziesz w stanie przewijać
Oznacza to, że rzutnia będzie miała taką samą szerokość dla obu
źródło
Prawdopodobnie
jest właśnie tym, czego chcesz.
źródło
calc()
do określenia szerokości głównego widoku zawartości, tak aby stała nawigacja poza ekranem mogła zajmować lewą stronę ekranu na pulpicie, a wszystko to przy zachowaniu natywnych przewiń na telefonie komórkowym.html
szerokości wvw
s jest trochę hakerskie , więc zachowaj ostrożność!Przeglądarki Webkit, takie jak Safari i Chrome, odejmują szerokość paska przewijania od widocznej szerokości strony podczas obliczania szerokości: 100% lub 100vw. Więcej na temat przewijania i szerokości strony DM Rutherforda .
Spróbuj użyć
overflow-y: overlay
zamiast tego.źródło
Okazało się, że mogę dodać
bezpośrednio do mojego css i spowodowałoby to, że pasek przewijania byłby niewidoczny, ale nadal pozwalałby mi przewijać (przynajmniej w Chrome). Przydaje się, gdy nie chcesz, aby rozpraszający Cię pasek przewijania na Twojej stronie!
źródło
W przypadku kontenerów o stałej szerokości można zastosować rozwiązanie CSS w różnych przeglądarkach, umieszczając kontener w innym elemencie div i stosując tę samą szerokość do obu elementów div.
Kliknij tutaj, aby zobaczyć przykład na Codepen
źródło
Nie wygląda na to, że moja druga odpowiedź działa w tej chwili całkiem nieźle (ale nadal będę próbować ją uruchomić).
Ale w zasadzie to, co musisz zrobić, i to, co próbowała zrobić dynamicznie, to ustawić szerokość zawartości na nieco mniejszą niż szerokość nadrzędnego, przewijalnego panelu.
Tak więc kiedy pojawi się pasek przewijania, nie ma to wpływu na zawartość.
Ten PRZYKŁAD pokazuje bardziej hakerski sposób osiągnięcia tego celu, poprzez twarde kodowanie
width
zamiast próbowania zmusić przeglądarkę do zrobienia tego za naspadding
.Jeśli jest to wykonalne, jest to najprostsze rozwiązanie, jeśli nie chcesz mieć stałego paska przewijania.
źródło
EDYTUJ: ta odpowiedź nie jest w tej chwili całkiem poprawna, zapoznaj się z moją drugą odpowiedzią, aby zobaczyć, co próbowałem tutaj zrobić. Próbuję to naprawić, ale jeśli możesz zaoferować pomoc, zrób to w komentarzach, dzięki!
Używanie
padding-right
złagodzi nagłe pojawienie się paska przewijaniaPRZYKŁAD
Jak widać z kropek, tekst dociera do tego samego miejsca na stronie przed zawinięciem, niezależnie od tego, czy jest obecny pasek przewijania.
Dzieje się tak, ponieważ po wprowadzeniu paska przewijania wypełnienie ukrywa się za nim, więc pasek przewijania nie naciska na tekst!
źródło
gdzie 300 pikseli to połowa szerokości mojego okna dialogowego.
To właściwie jedyna rzecz, która działała dla mnie.
źródło
Miałem ten sam problem w Chrome. Zdarzyło mi się to tylko wtedy, gdy pasek przewijania jest zawsze widoczny. (znalezione w ustawieniach ogólnych) mam modal i kiedy otworzę modal zauważyłem że ...
jest dodawany do ciała. Aby temu zapobiec, dodałem
źródło
Nie mogę dodać komentarza do pierwszej odpowiedzi i minęło dużo czasu ... ale to demo ma problem:
b.prop ('scrollHeight') zawsze równa się b.height (),
Myślę, że powinno być tak:
Na koniec polecam metodę:
źródło