Как использовать переполнение: авто с высотой не px в IE7 - PullRequest
Новая
       28

Как использовать переполнение: авто с высотой не px в IE7

1 голос
/ 08 апреля 2011

Я пытаюсь заставить работать следующий код без 670px, жестко запрограммированных в приложении: 

        <tr>
            <td height="100%">
                <div id="navigation" class="navigation">
                    <jsp:include page="menu.jsp" flush="true"/>
                </div>
            </td>
            <td>
                <div style="height:670px; overflow: auto; width:100%;">
                    <jsp:include page='dynamicContent.jsp' flush="true"/>
                </div>
                <div>
                    <center><jsp:include page="footer.jsp" flush="true" /></center>
                </div>
            </td>
        </tr>

В IE7 он прекрасно отрисовывается до изменения размера окна - область содержимого прокручивается с помощью нижнего колонтитула на фиксированной высоте над основанием страницы.

Однако это перестает работать (по понятным причинам), когда я уменьшаю окно, поскольку у меня установлен HTML-код страницы для использования overflow: hidden.

К сожалению, использование "height: 75%" не совместимо с переполнением в IE7.

Кто-нибудь знает, как я могу подделать это для IE7 (он должен быть совместим с IE7 из-за требований проекта)? К сожалению, этот код довольно встроен, поэтому использование позиционирования CSS вместо таблицы также, вероятно, требует больше работы, чем мы сможем обработать до следующего выпуска.

1 Ответ

1 голос
/ 17 апреля 2011

Избавьтесь от overlow: auto, overlow: hidden и фиксированной высоты. Вместо этого установите нижний колонтитул в фиксированное положение и добавьте нижнюю границу к телу высотой нижнего колонтитула. 

body
{
    margin-bottom: 100px;
}
.footer
{
    position: fixed;
    bottom: 0;
    height: 90px;
    padding-top: 10px;
    background-color: #fff;
}

Обязательно установите фон для нижнего колонтитула, иначе содержимое страницы может просвечивать.

Вот рабочий пример: http://jsfiddle.net/ADpMs/

...