Прокрутка внутри DIV, который не имеет позиции: абсолютный?

Question

Прокрутка внутри DIV, который не имеет позиции: абсолютный?

0

У меня есть веб-сайт с 5 горизонтальными div, которые все плавают: слева и имеют% ширины. В левом я хочу иметь текст и полосу прокрутки. Однако полоса прокрутки появляется только тогда, когда я даю ей положение: абсолютное. Попробуйте это в jsfiddle. Когда я это делаю, div игнорирует остальные 4, и они выходят из строя. Как мне обойти это?

Jsfiddle> http://jsfiddle.net/QN8RS/ Добавить позицию: абсолютная; к следующему div в CSS. Вы увидите, что он работает, но divs уходят с места.

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
    overflow:auto;
    top: 0px; 
    bottom: 0px;
}

Luuk van Aggelen 03 окт. 2013, в 16:16

Источник

0

попробуйте добавить другое свойство max-height=100%
Rajesh Paul 03 окт. 2013, в 13:38

Теги:

html

css

scroll

css-float

4 ответа

0

Причина в том, что вы указали height:100% на ваш div .main. 100% чего? Какой родитель?

Если вы укажете высоту тела на 100%, тогда она будет работать.

html, body { height: 100%; }

Проверьте обновленную скрипту: http://jsfiddle.net/QN8RS/2/

Abhitalks 03 окт. 2013, в 11:28

0

Вместо использования поплавков используйте position: absolute; и left: number%; (вам нужно будет выяснить, сколько% осталось от каждого элемента).

Посмотрите скрипт: http://jsfiddle.net/QN8RS/3/

SKeurentjes 03 окт. 2013, в 11:24

0

Я думаю, что вы ищете: overflow-y: scroll

Маленькая скрипка

Martijn 03 окт. 2013, в 10:38

0

Это заставляет полосу прокрутки визуализироваться, но, поскольку нет разницы между высотой элемента и высотой содержимого, оно не позволяет ничего прокручивать.
Quentin 03 окт. 2013, в 13:34
0

Квентин, но почему он прокручивается, когда я устанавливаю переполнение на авто, а положение на абсолютное, а не сейчас ?! У тебя есть решение?
Luuk van Aggelen 03 окт. 2013, в 13:35

Ещё вопросы

попробуйте добавить другое свойство max-height=100%
Это заставляет полосу прокрутки визуализироваться, но, поскольку нет разницы между высотой элемента и высотой содержимого, оно не позволяет ничего прокручивать.
Квентин, но почему он прокручивается, когда я устанавливаю переполнение на авто, а положение на абсолютное, а не сейчас ?! У тебя есть решение?

Quentin · Accepted Answer · 2013-10-03T10-49-00.000Z

Вы не указали высоту <body> поэтому ее высота вычисляется как auto.

Вы указали высоту .main как 100%. Это процент, так как высота его родителя (тела) вычисляется как auto, вычисленная высота также auto.

Вы указали высоту #left как 100%. Это процент, так как высота его родителя (.main) вычисляется как auto, вычисленная высота также auto.

Так как высота auto, высота такая же высокая, как и для содержания всего содержимого.

Поскольку вы установили overflow: auto, вы получаете только полосы прокрутки, если контент выше, чем элемент (а это не так).

Установите height: 100% на элементы html и body, так что вычисленная высота #left - это высота #left просмотра, а не auto.

Обыграй меня: +1 за быстрое объяснение!
Отлично объяснил, работал как шарм! Спасибо