Вы здесь: Начало Статьи HTML, CSS, javascript div height: 100%

div height: 100%

Подробности
Категория: HTML, CSS, javascript

Сделаем вертикальное выравнивание в блоке со 100% высотой:

Развернуть блок div по размеру экрана можно так:

HTML:

<body>

<div class="wrap"><div class="container">
	<p class="middled">Вертикально отцентрированный элемент</p>
</div></div>

</body>

CSS:

*{
	height:100%;
}

.wrap {
	display: table;
	width:100%;
	height:100%;
}

.container {
	display: table-cell;
	vertical-align: middle;
	height:100%;
	background:#ccc;
}

.middled{
	background:#eee;
	width:200px;
	height:200px;
	margin:0 auto;
}

Если не используется какой-нибудь вариант глобального сброса, нужно добавить еще обнуление полей и отступов для всех элементов:

* {
    margin: 0;
    padding: 0;
}

Для IE6, который не поддерживает min-height:

#wrap{
    height:100%;
}

Блок wrap играет роль таблицы, а container - ячейки

Вертикально отцентрированный элемент по высоте в 100% Вертикально отцентрированный элемент по высоте в 100% (335)