Подскажите, как сделать полужидкий макет без JavaScript, я чувствую, что мне не хватает чего-то простого - PullRequest
Новая
       15

Подскажите, как сделать полужидкий макет без JavaScript, я чувствую, что мне не хватает чего-то простого

4 голосов
/ 30 марта 2012

Ладно, во-первых, я поддерживаю обратно в IE7, так что размер ящика отсутствует.

У меня есть фиксированный размер верхнего и нижнего колонтитула (скажем, 80 пикселей каждый), расположенные в верхней и нижней части окна соответственно.

Я хочу, чтобы div занимал все пространство между ними независимо от размера окна. Легко и просто с JavaScript, но есть ли способ сделать это только с помощью CSS?

Ответы [ 2 ]

1 голос
/ 30 марта 2012

http://jsfiddle.net/ZLrPF/ на основе моего липкого нижнего колонтитула Джеймса Дина http://mystrd.at/modern-clean-css-sticky-footer может это сделать. IE7 потребуется немного больше любви, что можно сделать.

Edit:

Это решение IE7 +, которое будет работать в соответствии с запросом. 

html {
    height: 100%;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    display: table;
}
#header-wrapper, #content-wrapper, #footer-wrapper {
    display: table-row;
}
#header, #content, #footer {
    display: table-cell;
}
#header, #footer {
    height: 80px;
    background-color: orange;
}
#content {
    background-color: green;
}

<body>
    <div id="header-wrapper">
        <div id="header">header</div>
    </div>

    <div id="content-wrapper">
        <div id="content">content</div>
    </div>

    <div id="footer-wrapper">
        <div id="footer">footer</div>
    </div>
</body>
0 голосов
/ 30 марта 2012

Вы должны использовать липкий нижний колонтитул. Пример: http://ryanfait.com/sticky-footer/

...