Высота CSS 100% + переполнение: автоматически не отображается весь контент гнезда

В принципе, у меня есть одностраничное приложение HTML со всей фиксированной позицией, и я хочу, чтобы на одной панели было прокручиваемое содержимое. Все работает так, как ожидалось, но я не могу прокрутить до конца моего внутреннего контейнера содержимого. Я попытался переместить все в abs pos, я пробовал все решения, которые я смог найти на SO, которые связаны, но не кубики. Вот скрипка (http://jsfiddle.net/yhhjL/), и вот грубая штука моего разметки и CSS:

HTML

<header>
    <p>Company</p>
</header>

<div class="fixed-row-one"></div>

<div class="fixed-row-two"></div>

<div class="fixed-stage-left">

    <div class="scrollable">

        <table cellpadding="0" cellspacing="0">

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>First</td>
                <td>Second</td>
                <td>Third</td>
                <td>Fourth</td>
            </tr>

            <tr>
                <td>Last</td>
                <td>Last</td>
                <td>Last</td>
                <td>Last</td>
            </tr>

        </table>

    </div>

</div>

<div class="fixed-stage-right"></div>

CSS

body {
    margin:0;
    padding: 0    
}

header {
    width: 100%;
    height: 50px;
    position: fixed;
    background: black;
    color: white;
}

.fixed-row-one {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 50px;
    background: #AAA;
    color: white;
}

.fixed-row-two {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 100px;
    background: #e51837;
    color: white;
}

.fixed-stage-left {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    left: 0;
    background: #f1f1f1;
    color: #000;
}

.scrollable {
    width: 100%;
    height: 100%;
    background: #262626;
    overflow: auto;
    position: absolute;
}

.scrollable table tr{
    width: 100%;
    height: 50px;
    color: white;
    border-bottom: 1px solid #CCC;
}

.fixed-stage-right {
    width: 50%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 150px;
    right: 0;
    background: #0cf;
    color: #000;
}

Любые идеи будут высоко оценены.

+3
26 апр. '13 в 0:22
источник поделиться
1 ответ

http://jsfiddle.net/yhhjL/2/

Проблема заключалась в том, что элемент с фиксированной стадией слева уходил с страницы, поэтому проблема заключалась не в том, что она прокручивалась донизу. Элемент был просто отключен.

Удалив высоту неподвижной ступени и заменив ее на

.fixed-stage-left {
   width: 50%;
   top:150px; /*Edited here */
   bottom:0; /*Edited here */
   position: fixed;
   overflow: hidden;
   top: 150px;
   left: 0;
   background: #f1f1f1;
   color: #000;
}

Это заставляет браузер настраивать высоту, чтобы она соответствовала этим двум позициям.

Подробнее об этом типе проблемы: CSS: настройка ширины/высоты в процентах минус пиксели

+5
26 апр. '13 в 0:42
источник

Посмотрите другие вопросы по меткам или Задайте вопрос