переполнение (прокрутка) - высота контейнера 100%

Question

Я пытаюсь, чтобы плавающий элемент div (назовите его 'sidebar') отображал 100% высоты контейнера и прокручивал при необходимости.

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

содержимое является динамическим, а фиксированная высота невозможна.

Я бы хотел, если возможно, избегать таблиц, но использовал бы их, если бы это было единственным решением.

Я не хочу использовать JavaScript.

этот эффект может быть достигнут с помощью таблиц, если для таблицы, тела и ячеек задана высота 100%, а в одной ячейке установлен div с высотой: 100% и переполнением: прокрутка. это работает в webkit (Safari и Chrome) так же, как и в IE, но не работает в gecko (Fx) - 'fails' означает, что div с большим содержимым, чем контейнер, расширит контейнер (опять же только в Fx). та же идея работает в webkit, если использовать div с display: table / table-row / table-cell, но не работает как в Fx, так и в IE. Я могу предоставить образец этого, если это будет полезно.

Этот эффект также может быть достигнут с помощью iframe с высотой: 100%, который, кажется, работает во всех современных браузерах, но я бы хотел, если это возможно, также избежать ненужных iframe.

Мне нужно подумать, что, поскольку возможно использование вышеупомянутых «хаков», возможно, возможно использование css без таблиц, без фреймов, но это выше моего уровня понимания.

есть предложения? tyia.

Answer 1

Вот CSS-стиль для этого:

#container {
    width: 500px;
    border: 3px solid red;
    margin: 0 auto;
    position: relative;
}

#sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background-color: yellow;
    overflow-y: scroll;
}

#main {
    margin-left: 150px;
}

p, ul {
    padding: 10px;
}

<div id="container">
    <div id="sidebar">
        <ul>
            <li> line 1 </li>
            <li> line 2 </li>
            <li> line 3 </li>
            <li> line 4 </li>
            <li> line 5 </li>
            <li> line 6 </li>
            <li> line 7 </li>
            <li> line 8 </li>
            <li> line 9 </li>
            <li> line 10 </li>
            <li> line 11 </li>
            <li> line 12 </li>
            <li> line 13 </li>
            <li> line 14 </li>
            <li> line 15 </li>
            <li> line 16 </li>
            <li> line 17 </li>
            <li> line 18 </li>
            <li> line 19 </li>
            <li> line 20 </li>
        </ul>
    </div>
    <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>
</div>

Демонстрационная версия: http://jsfiddle.net/TUwej/2/