Иметь фиксированную позицию div, которую нужно прокручивать, если содержимое переполняется

У меня на самом деле две проблемы, но давайте сначала решим основную проблему, так как я считаю, что другую легче решить.

У меня есть фиксированное положение div на левой стороне прокрутки для меню. Правая сторона - это стандартный div, который правильно прокручивается. Проблема в том, что когда порт просмотра браузера слишком мал, чтобы видеть все меню ... нет способа заставить его прокрутить, что я могу найти (по крайней мере, с помощью css). Я пытался использовать различные переполнения в CSS, но ничто не делает прокрутку div. Для div, содержащего меню, задано значение min-height: 100% и position: fixed ... оба атрибута, которые мне нужно сохранить.

Div, содержащий меню, находится внутри другого div-оболочки, который расположен абсолютно, а высота установлена ​​на 100%.

Как я могу заставить его прокручиваться по вертикали, если содержимое слишком высокое для div?

Это приводит меня к другой проблеме, к которой я не хочу, чтобы отображалась полоса прокрутки ... но я думаю, что у меня уже может быть ответ на этот вопрос (только он пока не работает, потому что я не могу заставить div прокручивать начать с).

Какие-либо решения? Возможно, нужен javascript? (о котором я мало знаю)

Пример JS Fiddle

и соответствующий код, который вызывает проблему (так как публикация всей статьи здесь слишком длинная):

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

Также попытался добавить высоту: 100%, просто чтобы посмотреть, если это было проблемой, но она тоже не работала ... и не работала с фиксированной высотой, такой как 600px.

Проблема с использованием height:100%состоит в том, что это будет 100% страницы вместо 100% окна (как вы, вероятно, ожидаете). Это вызовет проблему, которую вы видите, потому что нефиксированный контент достаточно длинный, чтобы включать фиксированный контент с высотой 100% без полосы прокрутки. Браузер не знает / не заботится о том, что вы не можете прокрутить эту полосу вниз, чтобы увидеть ее

Вы можете использовать, fixedчтобы выполнить то, что вы пытаетесь сделать.

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

Эта вилка вашей скрипки показывает мое исправление: http://jsfiddle.net/strider820/84AsW/1/

Вот оба исправления.

Во-первых, что касается фиксированной боковой панели, вам нужно задать ей высоту для переполнения:

HTML-код:

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

Код 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%;}
}

Живой пример: http://jsfiddle.net/RWxGX/3/

Невозможно НЕ получить полосу прокрутки, если ваш контент переполняет высоту div. Вот почему я добавил медиа-запрос для высоты экрана. Может быть, вы можете настроить стили для коротких размеров экрана, чтобы прокрутка не появлялась.

Ура, Игнасио

Вообще говоря, фиксированный участок должен быть установлен с width, heightи top, bottomсвойства, в противном случае она не будет признавать его размер и положение.

Если используемый ящик является прямым потомком для тела и имеет соседей, то имеет смысл проверить z-indexи top, leftсвойства, так как они могут перекрывать друг друга, что может повлиять на наведение мыши при прокрутке содержимого.

Вот решение для блока контента (прямого потомка bodyтега), который обычно используется вместе с мобильной навигацией.

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

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

Надеюсь, это кому-нибудь поможет. Спасибо!

Решения здесь не работают для меня, так как я разрабатываю компоненты реакции.

Что работало, хотя для боковой панели было

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

Надеюсь, это кому-нибудь поможет.

Оставить ответ для тех, кто хочет сделать что-то подобное, но в горизонтальном направлении, как я и хотел.

Тонкая настройка ответа @ strider820 , как показано ниже, сделает волшебство:

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

Вот и все. Также проверьте этот комментарий, где @train объяснил использование overflow:autoover overflow:scroll.