W rzeczywistości mam dwa problemy, ale najpierw rozwiążmy główny problem, ponieważ uważam, że drugi jest łatwiejszy do rozwiązania.
Mam stały element div po lewej stronie przewijania menu. Prawa strona to standardowy element div, który przewija się prawidłowo. Problem polega na tym, że kiedy port widoku przeglądarki jest zbyt mały, aby zobaczyć całe menu ... nie ma sposobu, aby przewijać to, co mogę znaleźć (przynajmniej nie za pomocą css). Próbowałem użyć różnych przepełnień w css, ale nic nie powoduje przewijania div. Element div zawierający menu ma ustawioną wartość min-height: 100% i position: fixed .. oba atrybuty, które muszę zachować.
Element div zawierający menu znajduje się wewnątrz innego opakowującego elementu div, który jest ustawiony bezwzględnie i ma wysokość ustawioną na 100%.
Jak sprawić, by przewijało się w pionie, jeśli zawartość jest zbyt wysoka dla elementu div?
To prowadzi mnie do innego problemu, że nie chcę wyświetlać paska przewijania .. ale myślę, że mogę już mieć na to odpowiedź (tylko że to jeszcze nie działa, ponieważ nie mogę przewinąć elementu div najpierw).
Jakieś rozwiązania? Może potrzebny jest javascript? (o którym niewiele wiem)
i odpowiedni kod, który powoduje problem (ponieważ opublikowanie całości tutaj jest zbyt długie):
.fixed-content {
min-height:100%;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Próbowałem także dodać wysokość: 100%, aby sprawdzić, czy to był problem, ale to też nie zadziałało ... ani stała wysokość, na przykład 600 pikseli.
źródło
Odpowiedzi:
Problem z używaniem
height:100%
polega na tym, że będzie to 100% strony zamiast 100% okna (tak jak prawdopodobnie byś się spodziewał). Spowoduje to problem, który widzisz, ponieważ nieustalona zawartość jest wystarczająco długa, aby dołączyć stałą zawartość o wysokości 100% bez konieczności używania paska przewijania. Przeglądarka nie wie / nie dba o to, że nie możesz przewinąć tego paska w dół, aby go zobaczyćMożesz użyć,
fixed
aby osiągnąć to, co próbujesz zrobić.Ten widelec twoich skrzypiec pokazuje moją poprawkę: http://jsfiddle.net/strider820/84AsW/1/
źródło
Oto obie poprawki.
Po pierwsze, jeśli chodzi o stały pasek boczny, musisz nadać mu wysokość, aby się przepełnił:
Kod HTML:
Kod CSS:
Przykład na żywo: http://jsfiddle.net/RWxGX/3/
Nie można NIE uzyskać paska przewijania, jeśli zawartość przekracza wysokość elementu div. Dlatego dodałem zapytanie o media dotyczące wysokości ekranu. Może możesz dostosować style do małych rozmiarów ekranu, aby przewijanie nie musiało się pojawiać.
Pozdrawiam, Ignacio
źródło
Ogólnie rzecz ujmując, stała sekcja powinna być ustawiona z
width
,height
atop
,bottom
właściwości, inaczej nie rozpozna jego rozmiar i położenie.Jeśli używane pole jest bezpośrednim dzieckiem dla ciała i ma sąsiadów, warto sprawdzić
z-index
itop, left
właściwości, ponieważ mogą się na siebie nakładać, co może wpływać na najeżdżanie myszą podczas przewijania zawartości.Oto rozwiązanie dla pola treści (bezpośredniego elementu podrzędnego
body
tagu), które jest powszechnie używane wraz z nawigacją mobilną.Mam nadzieję, że to pomoże każdemu. Dziękuję Ci!
źródło
Rozwiązania tutaj nie zadziałały, ponieważ stylizuję elementy reagujące.
To, co zadziałało w przypadku paska bocznego, to
Mam nadzieję, że to komuś pomoże.
źródło
Pozostawienie odpowiedzi każdemu, kto chce zrobić coś podobnego, ale w kierunku poziomym , tak jak ja chciałem.
Poprawianie odpowiedzi @ strider820 , jak poniżej, zrobi magię:
Otóż to. Sprawdź również ten komentarz, w którym @train wyjaśnił użycie
overflow:auto
overoverflow:scroll
.źródło