резиновый Div во весь экран с отступами по краям

xDev · January 18, 2011

Пытаюсь сделать резиновый Div во весь экран с отступами по краям, только вот блок съезжает на право.

Как реализовать задуманное, мой способ не работает?

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

<html>

	<head>

		<title>XHTML</title>

		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

		<style type="text/css">

		#head {width:100%; height:98px; margin:2px 10px; background:gray; border:2px solid black;}

		</style>

	</head>

<body>

<div id="head">

</div>

</body>

</html>

Edited January 18, 2011 by xDev

Vlad · January 18, 2011

Логичное поведение, все по спецификации. Ширина блока это 100% + 20px отступ + 4px граница, вот и выходит за край. Есть два способа "борьбы".

1. http://htmlbook.ru/blog/ispolzovanie-box-sizing

2. Вложенные div. Для первого ширина не задается, для внутреннего указываются отступы и граница.

panettone · January 18, 2011

А margin обязательно в пикселах? Если нет, то попробуй так:

#head {width:98%; margin:1% 10px; /* etc. */}

sigma77 · January 18, 2011

xDev,

Просто не задавай ширину. Блок примет необходимую ширину автоматически.

Vlad · January 18, 2011

Сигмочка, ты молодец, я что-то со всякими box-sizing совсем забыл о самом простом решении.

xDev · January 18, 2011

Спасибо!

Не могу сейчас поэкспериментировать, так вот вопрос: если содержимое превышет заданную ширину, то блок изменит свои размеры, подстраиваясь под содержимое?

Edited January 18, 2011 by xDev

Vlad · January 18, 2011

Если задано значение width, то содержимое при превышении ширины отображается поверх блока. Но это редко случается из-за переносов текста.

Sign In

резиновый Div во весь экран с отступами по краям

Question

xDev

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

panettone

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

xDev

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information