Miej element div o stałej pozycji, który musi być przewijany, jeśli zawartość się przepełnia

150

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)

Przykład JS Fiddle

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.

Fabryka TCD
źródło
Opublikuj plik jsfiddle z aktualnie używanymi kodami HTML i CSS, abyśmy mogli zobaczyć problem. Dzięki!
mchail
3
czy próbowałeś przepełnienia: auto; ?
Dan,
Tak, przepełnienie: auto lub przepełnienie-y: przewijanie lub przepełnienie: przewijanie wszystkiego nie pozwala na przewijanie ustalonego elementu div.
TCD Factory
Powodem konieczności przewijania jest to, że element div ma ZA DUŻO treści w zdefiniowanych długościach. Jeśli port widoku przeglądarki zmniejszy się, nie spowoduje to, że element div i tak wymusi przewijanie.
Dan
Nie można opublikować JSfiddle i html / css, ponieważ jest po prostu zbyt długi i nie pozwalają na opublikowanie linku JSfiddle bez kodu. :( Opublikowałem tylko fragment kodu, który wydaje się nie pomagać w przewijaniu div ... i link do całej rzeczy.
TCD Factory

Odpowiedzi:

245

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ć, fixedaby osiągnąć to, co próbujesz zrobić.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Ten widelec twoich skrzypiec pokazuje moją poprawkę: http://jsfiddle.net/strider820/84AsW/1/

szmigielska820
źródło
Pracował. Potrzebowałem tego do adaptacji artykułu Codrops. Niektórzy mogą również potrzebować ustawić lewy i prawy na 0. Wielkie dzięki, powodzenia
Santiago Baigorria
19
Jeśli ustawisz „overflow-y” na auto, pasek przewijania zniknie, gdy zawartość znajdzie się w widocznym obszarze. Innymi słowy, jeśli się nie przepełni, nie będzie paska przewijania, a gdy się przepełni, pojawi się pasek przewijania.
pociąg
Poprawny. Po prostu korzystałem z jego css i naprawiałem to, co było naprawdę zepsute. Jednak wydawało się, że ma już odpowiedź na to pytanie w swoim pytaniu.
strider820
3
zadziałało! świetne rozwiązanie. Nadal nie rozumiem na dole: część 0 .. czy mógłbyś wyjaśnić pls?
Gianluca Ghettini
5
Dodanie top: 0 i bottom: 0 z pominięciem wysokości w elemencie o stałej pozycji powoduje, że przeglądarka rozciąga element, aby górny był na 0, a na dole na 0.
strider820
6

Oto obie poprawki.

Po pierwsze, jeśli chodzi o stały pasek boczny, musisz nadać mu wysokość, aby się przepełnił:

Kod HTML:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Kod CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

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

ignacioricci
źródło
Zobacz przykład JSFiddle, który opublikowałem. Zobaczysz problem.
TCD Factory
To nie działa w starszych przeglądarkach, takich jak Mobile Safari na iOS 4.2
mheavers
4

Ogólnie rzecz ujmując, stała sekcja powinna być ustawiona z width, heighta top, bottomwł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-indexi top, leftwł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 bodytagu), które jest powszechnie używane wraz z nawigacją mobilną.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Mam nadzieję, że to pomoże każdemu. Dziękuję Ci!

Lefan
źródło
3

Rozwiązania tutaj nie zadziałały, ponieważ stylizuję elementy reagujące.

To, co zadziałało w przypadku paska bocznego, to

.sidebar{
position: sticky;
top: 0;
}

Mam nadzieję, że to komuś pomoże.

Adebola
źródło
Od lat edytuję CSS i nie miałem pojęcia o atrybucie „lepka pozycja”. Dzięki za to, zadziałało idealnie również dla mojego wdrożenia!
1owk3y
0

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ę:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

Otóż ​​to. Sprawdź również ten komentarz, w którym @train wyjaśnił użycie overflow:autoover overflow:scroll.

Siddhesh T
źródło