Составленные деления со смещениями относительно родственных делений - PullRequest
Новая
       20

Составленные деления со смещениями относительно родственных делений

3 голосов
/ 20 февраля 2012

У меня есть div, который отображает всю высоту экрана.Я хочу поместить туда три элемента: верхний, нижний и нижний колонтитулы, причем верхний и нижний колонтитулы торчат вверху и нижний колонтитул, а содержимое подгоняется между ними.Решения, которые я нашел для этого, требуют, чтобы я определил высоту нижнего колонтитула и / или верхнего колонтитула, а затем дал центру div поле, равное той высоте, которую я хочу оставить неопределенной (они должны растягиваться, чтобы соответствоватьсодержание).Есть ли способ сделать это без использования javascript?

Когда размер браузера изменяется, нижний колонтитул и верхний колонтитул должны оставаться неизменными, а центр должен уменьшаться. 

<html>
<head>
<style>
.stretchedToMargin {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    background-color: green;
}
</style>
</head>
<body>

<div class="stretchedToMargin">

    <div>
        Header (style="top:0") Indefinite height. 
        expands to fit content without scrolling.
    </div>

    <div>
        Content
        Fits between header and footer, using the pixels leftover 
        scrolling if needed
    </div>

    <div>Footer (style="bottom:0") Indefinite height.
        expands to fit content without scrolling.
    </div>

</div>

</body>
</html>

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

<div class="stretchedToMargin">

    <table style="height:100%;">
        <tr>
            <td style="height:1px;">Header</td>
        </tr>
        <tr>
            <td><div style="height:100%; overflow:auto;">...Long text...</div></td>
        </tr>
        <tr>
            <td style="height:100px">Footer</td>
        </tr>
    </table>

</div>

1 Ответ

1 голос
/ 20 февраля 2012

Самый простой способ - использовать display:table в обёртке и display:table-row в разделах div, однако, как обычно, IE не поддерживает его, так что просто используйте фактический <table>. Да, это не семантическая , но это небольшой компромисс на самом деле.

...