Отступы при стопроцентной ширине/высоте

Great Rash · March 18, 2009

Есть див высотой 50% от окна. Внутри него есть еще один див, который должен быть высотой 100% от родительского дива минус 30 пикселей сверху и снизу.

Если я добавляю padding к родительскому диву, то его высота получается больше 50%. Возможно ли сделать нужные отступы, не увеличивая высоту родительского дива, не используя JavaScript? Сделать высоту родительского дива меньше 50% нельзя, т.к. иначе размер будет немного разный по высоте при различных разрешениях, что недопустимо.

Victor Ananiev · March 18, 2009

засунуть в див 100% высоты див с 30px маргинами сверху и снизу)

Great Rash · March 18, 2009

Ничего не выйдет: т.к. если не задавать явно высоту у дива с маргинами, то тогда высота дочернего дива не будет 100%, а если задать высоту явно, то опять возникнет проблема с увеличением дива в размерах.

Searcher · March 18, 2009

.divclass {
  position:absolute;
  top:30px;
  left:0;
  bottom:30px;
  width:100%;
}

Ну а для ie младше 7-го нужны костыли, допустим в виде expression.

Great Rash · March 18, 2009

Это к родителю надо применить?

Собссно даже смысла нет применять никуда... если сделать по вашему, то див растянется на всю высоту окна, а мне надо чтобы он растянулся на всю высоту родительского дива минус отступы.

Edited March 18, 2009 by Great Rash

Victor Ananiev · March 18, 2009

родителю позишн релатив! а вот это чем не выход:

<style>
*
{
 margin:0;
 padding:0;
}
#wrap
{
 height:50%;
}
#inner
{
 height:100%;
}
#content
{
 margin:30px 0;
}
</style>

<div id="wrap">
 <div id="inner">
  <div id="content"> </div>
 </div>
</div>

Searcher · March 18, 2009

Это к родителю надо применить?
Собссно даже смысла нет применять никуда... если сделать по вашему, то див растянется на всю высоту окна, а мне надо чтобы он растянулся на всю высоту родительского дива минус отступы.

Это не к родителю, а непосредственно к диву у которого нужны отступы. Думайте, разбирайте код который вам дают, какое свойство за что отвечает. Иначе получив готовый скрипт вы ничему не научитесь, а в следующий раз опять будете тормозить и просить помощи по аналогичному вопросу. Если указано top:30px, то какого фига это к родителю применять?! Вы что не знакомы с этим свойством? Так прочитайте про все свойства, и не придется следующий раз из-за ерунды по форумам лазить.

Чтобы абсолютное позиционирование работало относительно родительского элемента, а не относительно всего окна, нужно у родителя указать position:relative; или тоже position:absolute;.

Great Rash · March 19, 2009

Victor Ananiev

Вот мой код (к вашему добавил бордеры и контент для наглядности):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Valid XHTML 1.0 Strict template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			height: 100%;
		}

		#wrap {
			height: 50%;
			border: #f00 1px solid;
		}

		#inner {
			height: 100%;
		}

		#content {
			margin: 30px 0;
			overflow: auto;
			border: #000 1px solid;
		}
	</style>
</head>

<body>

<div id="wrap">
	<div id="inner">
		<div id="content">
			text<br /><br /><br /><br /><br /><br />
			text<br /><br /><br /><br /><br /><br />
			text<br /><br /><br /><br /><br /><br />
		</div>
	</div>
</div>

</body>
</html>

Нету скролла, хотя стоит overflow: auto;. Собссно нужен скролл, причем именно у дива content.

Searcher

Камрад, откуда столько негатива? Если мой ответ вас разозлил, тогда прошу прощения. Если вас напрягает отвечать на мои вопросы, тогда смысл на них отвечать? Только нервы себе портить.

UPD: Кстати, не знал, что если у родителя указать position: absolute;, то потомок будет позиционироваться относительно него.

В общем проблема решена, всем спасибо.

Edited March 19, 2009 by Great Rash

Sign In

Отступы при стопроцентной ширине/высоте

Question

Great Rash

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information