(CSS) DIV при высоте 100% вычесть 200px снизу

Boron · October 11, 2011

Привет! Торможу уже второй день с проблемой.

У меня есть DIV. Я его растягиваю на 100% по высоте. Но я хочу, чтобы при этом, 200рх снизу оставалось пустым. Это вообще возможно сделать средствами CSS?

Пробовал применять такой код, но они не работают:


  height: 100%;
  margin-bottom: 200px;

и


  height: 100%;
  margin-bottom: -200px;

bot87 · October 11, 2011

<html>
<head>
<style type="text/css">
div{
	position: absolute;top:0;
	bottom:200px;
	width:100px;
	background:red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

для ие нада expression

psywalker · October 11, 2011

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	html,body { height: 100%;}
	.wrap {background: red; position: absolute; width: 100%; top: 0; bottom: 100px;}

</style>
</head>

<body>
	<div class="wrap">
    </div>

</body>
</html>

Edited October 11, 2011 by psywalker
опоздал

Boron · October 11, 2011

bot87 и psywalker, благодарю за ответ.

Да, работает решение нормально в плане поставленного вопроса, но возникла одна проблема, которую я ранее не предусмотрел, а именно.

Если заполнить DIV конентом, то DIV не растягивается, а остаётся прежнего размера, в следствии чего, содержимое выходит за пределы DIV'а. Эта проблема решаема?

И ещё одно уточнение: решение должно корректно работать и в IE6.

Кто-то может что-то посоветовать?

psywalker · October 11, 2011

bot87 и psywalker, благодарю за ответ.
Да, работает решение нормально в плане поставленного вопроса, но возникла одна проблема, которую я ранее не предусмотрел, а именно.
Если заполнить DIV конентом, то DIV не растягивается, а остаётся прежнего размера, в следствии чего, содержимое выходит за пределы DIV'а. Эта проблема решаема?
И ещё одно уточнение: решение должно корректно работать и в IE6.
Кто-то может что-то посоветовать?

Ну тогда просто делай дополнительный блок для контента, а этот используй, как фон. У блока с контентом делай оступы нижние просто, паддинги, например.

Для ИЕ6 экпрешанны

SelenIT · October 11, 2011

Можно сделать блок с min-height:100% (для 6-го ишака через хак или усл. коммент подсунуть height:100%, там он работает как min-height), а внутрь - еще одну прослойку, и уже ей задать нижний отступ. Будет работать везде

Упс, медленно с телефона набираю

Boron · October 11, 2011

psywalker, попробовал такой вариант... В общем меея он не устраивает. Но всё-равно спасибо за ответы!

SelenIT, не получилось то, что ты написал (я понял, что ты имел ввиду, но конкретно у меня так не сработало).

Ребята, спасибо всем за ответы! Решил проблему, изменив вёрстку.

Sign In

(CSS) DIV при высоте 100% вычесть 200px снизу

Question

Boron

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

bot87

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Boron

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Boron

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information