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

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.

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/

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

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!

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.

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.