Mieć stałą pozycję div, która musi przewijać, jeśli zawartość jest przepełniona

Mam właściwie dwa problemy, ale najpierw rozwiążmy główny problem, ponieważ uważam, że drugi jest łatwiejszy do rozwiązania.

Mam stałą pozycję div po lewej stronie przewijania dla menu. Prawa strona jest standardowym div, który przewija się prawidłowo. Problem polega na tym, że gdy port widoku przeglądarki jest zbyt mały, aby zobaczyć całe menu.. nie ma sposobu, aby go przewijać, który mogę znaleźć (przynajmniej nie za pomocą css). Próbowałem używać różnych przepełnień w css, ale nic nie powoduje przewijania div. Div zawierający menu jest ustawiony na min-height: 100% oraz position: fixed.. oba atrybuty muszę zachować.

Div zawierający menu znajduje się wewnątrz innego div wrappera, który jest ustawiony absolutnie i ustawiony na 100%.

Jak mogę go przewijać pionowo, jeśli zawartość jest zbyt wysoka dla div?

To prowadzi mnie do innej kwestii, że nie chcę wyświetlać paska przewijania.. ale chyba już mam na to odpowiedź (tylko jeszcze nie działa bo nie mogę ściągnąć div na początek).

Jakieś rozwiązania? Być może javascript jest potrzebny? (o których niewiele wiem)

Przykład js Fiddle

I odpowiedni kod, który powoduje problem (ponieważ umieszczenie całości tutaj jest waaay za długie): 

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Próbowałem również dodać height: 100%, aby sprawdzić, czy to był problem, ale też nie zadziałało... nie ma też stałej wysokości, takiej jak 600px.

Author: TCD Factory, 2013-04-19
Source

2 answers

Wiem, że to stare pytanie, ale pomyślałem, że rzucę tę odpowiedź.

Problem z użyciem height: 100% polega na tym, że będzie to 100% strony, a nie 100% okna (tak jak prawdopodobnie się tego spodziewasz). Spowoduje to problem, który widzisz, ponieważ niestandardowa zawartość jest wystarczająco długa, aby uwzględnić stałą zawartość o wysokości 100% bez konieczności używania paska przewijania. Przeglądarka nie wie/obchodzi, że nie można faktycznie przewijać tego paska w dół, aby zobaczyć it

Jednak, ponieważ fixed ma właściwości, które robi, możesz zrobić to zamiast tego i osiągnąć to, co próbujesz zrobić: 

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

Oto widelec twojego jsfiddle, aby pokazać, że moja poprawka działa: http://jsfiddle.net/strider820/84AsW/1/

 184
Author: strider820,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-21 20:01:18

Oto obie poprawki.

Po pierwsze, jeśli chodzi o stały pasek boczny, musisz dać mu wysokość, aby mógł 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/

To niemożliwe, aby nie uzyskać pasek przewijania, jeśli zawartość przepełnia wysokość div. Dlatego dodałem Zapytanie o wysokość ekranu. Może możesz dostosować style do krótkich rozmiarów ekranu, aby przewijanie nie było konieczne pojawiaj się.

Pozdrawiam, Ignacio
 3
Author: ignacioricci,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-18 23:46:04