Masz ustaloną pozycję div, która musi przewinąć, jeśli zawartość przepełnienia

Question

Mam dwie rzeczy, ale najpierw rozwiąż główny problem, ponieważ uważam, że drugi jest łatwiejszy do rozwiązania.

Mam ustaloną pozycję div po lewej stronie przewijania w menu. Prawa strona to standardowy element div, który jest prawidłowo przewijany. Problem polega na tym, że gdy port przeglądarki jest zbyt mały, aby wyświetlić całe menu ... nie ma sposobu, aby go przewinąć, że mogę znaleźć (przynajmniej nie z css). Próbowałem już używać różnych przepełnień w css, ale nic nie powoduje przewijania div. Element div zawierający menu jest ustawiony na min-height: 100% i position: fixed. Oba atrybuty muszę zachować.

Element zawierający menu znajduje się w innym opakowaniu typu div, które jest ustawione absolutnie, a wysokość ustawione na 100%.

Jak mogę go przewinąć w pionie, jeśli zawartość jest zbyt wysoka dla elementu div?

To prowadzi mnie do innej kwestii, że nie chcę paska przewijania do wyświetlenia .. ale myślę, że mogę już na to odpowiedzieć (tylko, że to nie działa, ponieważ nie mogę uzyskać div, aby przewinąć, aby rozpocząć).

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

JS Fiddle Example

i odpowiedni kod, który jest przyczyną problemu (od zaksięgowania całość tu jest waaay zbyt długo):

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

próbował także dodawanie wysokość: 100%, aby sprawdzić, czy to był problem, ale też nie działał ... ani nie miał ustalonej wysokości, na przykład 600px.

Answer 1

wiem, jest to stara sprawa, ale ja po prostu myślałam, że rzucę tę odpowiedź tam.

Problem z używaniem wysokości: 100% oznacza, że ​​będzie to 100% strony zamiast 100% okna (jak można się spodziewać). Spowoduje to pojawienie się problemu, ponieważ nie-ustalona zawartość jest wystarczająco długa, aby uwzględnić stałą treść o wysokości 100% bez konieczności używania paska przewijania.Przeglądarka nie ma pewności, że nie można przewinąć tego paska, aby go zobaczyć. Jednak, ponieważ naprawiono ma właściwości, które robi, możesz to zrobić 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 pokazać moją pracę poprawek: http://jsfiddle.net/strider820/84AsW/1/

Answer 2

Oto dwie poprawki.

Po pierwsze, w odniesieniu do stałej bocznym, trzeba nadać jej wysokość na to, aby przepełnić:

HTML kod:

<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%;} 
} 

żywo przykład: http://jsfiddle.net/RWxGX/3/

Niemożliwe NIE aby uzyskać pasek przewijania, jeśli zawartość przekracza wysokość elementu div. Właśnie dlatego dodałem zapytanie o media dotyczące wysokości ekranu. Być może możesz dostosować swoje style do rozmiarów krótkich ekranów, aby przewijanie nie było konieczne.

Cheers, Ignacio