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

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

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

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

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

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

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

Пример скрипта JS

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

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

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

Ответ 1

Проблема с использованием 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/

Ответ 2

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

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

Код 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. Поэтому я добавил медиа-запрос для высоты экрана. Возможно, вы можете настроить свои стили для размеров короткого экрана, чтобы прокрутка не появлялась.

Cheers, Игнасио

Ответ 3

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

Тонкая настройка @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:auto вместо overflow:scroll.

Ответ 4

Вообще говоря, фиксированный участок должен быть установлен со свойствами 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;
}

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