Как растянуть блок контента до подвала

@ALX2K · Регистрация: 24.05.2016

Author24 — интернет-сервис помощи студентам

Привет. Я прикрепил .footer к низу страницы. Но у меня не получается дорастянуть блок контента, чтобы он всегда занимал все пространство между .header и .footer.
Код должен работать в IE8, поэтому calc, flex-box и пр. не подходит.

HTML5

<!doctype html>
<html>
    <head>
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html,
            body {
                height: 100%;
            }
            .wrapper {
                position: relative;
                min-height: 100%;
                border: 2px dotted #333;
                margin: 0 auto;
                width: 980px;
            }
            .header {
                background-color: red;
                height: 150px;
            }
            .content {
                padding-bottom: 90px;
                background-color: green;
            }
            .footer {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 80px;
                background-color: blue;
            }
        </style>
    </head> 
    
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="content"</div>
            <div class="footer"></div>
        </div>
    </body>
</html>

@mrtoxas · 03.05.2017, 23:18

Прижать footer к нижнему краю страницы. Подборка вариантов.
8й вариант.

@ALX2K · 04.05.2017, 06:34 **[ТС]**

Сообщение от mrtoxas

8й вариант.

mrtoxas, спасибо, но препод запрещает использовать табличную верстку. Нужно делать блоками.

@ALX2K · 04.05.2017, 07:08 **[ТС]**

В первом сообщении я указал только основные блоки на странице. Страница же должна выглядеть как на рисунке.
Сверху .header. Его высота, желательно, зависит от содержимого, но можно задать прямо в пикселях.
В самом низу .footer. Высота в пикселях.
Между ними блок .content (выделен красной рамкой). Высота зависит от содержимого. Если содержимого мало, то все пространство от .header до .footer. Внутри .content два блока. Их высота 100% от высоты .content, за исключением paddingов .contenta.

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.05.2017, 23:18	2
	Прижать footer к нижнему краю страницы. Подборка вариантов. 8й вариант. 1

@ALX2K 1 / 1 / 0 Регистрация: 24.05.2016 Сообщений: 81
	04.05.2017, 06:34 [ТС]	3
	Сообщение от mrtoxas 8й вариант. mrtoxas, спасибо, но препод запрещает использовать табличную верстку. Нужно делать блоками. 0

@ALX2K 1 / 1 / 0 Регистрация: 24.05.2016 Сообщений: 81
	04.05.2017, 07:08 [ТС]	4
	В первом сообщении я указал только основные блоки на странице. Страница же должна выглядеть как на рисунке. Сверху .header. Его высота, желательно, зависит от содержимого, но можно задать прямо в пикселях. В самом низу .footer. Высота в пикселях. Между ними блок .content (выделен красной рамкой). Высота зависит от содержимого. Если содержимого мало, то все пространство от .header до .footer. Внутри .content два блока. Их высота 100% от высоты .content, за исключением paddingов .contenta. Миниатюры 0