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

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

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

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

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

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

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

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

Ответы

Ответ 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 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>