Небольшой промежуточек

]-[иколай · June 30, 2009

Доброго всем дня, прошу помочь капельку доработать верстку. Хочется, чтобы между вырхней\нижней границами окна и хидером\футером было пространство, допустим в 10px или 1%. Пробовал писать что-то типа body {height:98%; margin-top:1%}; или же html {height:98%; padding-top:1%}; и т.д. Выходит ерунда, хотя, вроде, все логично...

Благодарю за помощь.

<!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">
	<head>
		<style type="text/css">
			html, body {
				padding: 0px;
				margin: 0px;
				height: 100%;
				margin-left: 20%;
				margin-right: 20%;
				background-color: Black;
			}
			div#body {
				height: auto !important;
				height: 100%;
				min-height: 100%;
				background-color: Maroon;
			}
			div#footer {
				height: 20px;
				margin-top: -30px;
				padding: 5px;
				background-color: Yellow;
			}
			div#header {
				height: 20px;
				padding: 5px;
				background-color: Aqua;
			}
			div#content {
				padding: 5px;
			}
			div#spacer {
				height: 30px;
				background-color: Gray;
			}
		</style>
		<title>
			title
		</title>
	</head>
	<body>
		<div id="body">
			<div id="header">
				header
			</div>
			<div id="content">
				content
			</div>
			<div id='spacer'></div>
		</div>
		<div id='footer'>
			©
		</div>
	</body>
</html>

3ABAPKA · July 1, 2009

Ты ты сначала обнулил, а потом ерундой зинимаешься

....

 html, body {
				padding: 0px;
				margin: 0px;

....

если тебе сверху и снизу надо по 10px так и пиши

margin: 10px 0 10px 0;

]-[иколай · July 1, 2009

3ABAPKA, такой вариант не подходит... Это страница с подвалом, растянутая по высоте. Если просто написать

body {

margin: 10px 0 10px 0;

}

то страница выйдет за пределы экрана на 20px...

Надо както уменьшить высоту body на 20 пикселей. Вопрос в том, КАК????

Edited July 1, 2009 by ]-[иколай

Great Rash · July 1, 2009

http://forum.htmlbook.ru/index.php?showtopic=14816

:)

<- это языки тем кто говорил, что мы бредом занимались. А оно таки понадобилось!

Searcher · July 1, 2009

как вариант:

<!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">
	<head>
		<style type="text/css">
			html, body {
				padding: 0px;
				margin: 0px;
				height: 100%;
				margin: 0 20%;
				background-color: Black;
			}
			div#body {
				height: auto !important;
				height: 100%;
				min-height: 100%;
				background-color: Maroon;
			}
			div#footer {
				height: 40px;
				margin-top: -40px;
				background-color: Black;
			}
			div#innerfooter {
				height: 20px;
				padding: 5px;
				background-color: Yellow;
			}
			div#header {
				height: 30px;
				background-color: Black;
			}
			div#innerheader {
				position: relative;
				top: 10px;
				height: 20px;
				padding: 5px;
				background-color: Aqua;
			}
			div#content {
				padding: 5px;
			}
			div#spacer {
				height: 40px;
				background-color: Gray;
			}
		</style>
		<title>
			title
		</title>
	</head>
	<body>
		<div id="body">
			<div id="header">
				<div id='innerheader'>
					header
				</div>
			</div>
			<div id="content">
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
				content content content content content content content content <br/>
			</div>
			<div id='spacer'></div>
		</div>
		<div id='footer'>
			<div id='innerfooter'>
				©
			</div>
		</div>
	</body>
</html>

Edited July 1, 2009 by Searcher

3ABAPKA · July 1, 2009

			html, body {
				padding: 0;
				margin: 10px 0 10px 0;
				height: 96%;
				margin-left: 20%;
				margin-right: 20%;
				background-color: Black;
			}

Searcher · July 1, 2009

3ABAPKA, это очень грубое решение.

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

Мое решение тоже не универсально, оно предполагает однотонный фон.

И еще, не надо одновременно присваивать и html и для body margin: 0 20%; у вас ведь получается, что и html имеет отступы по 20% и в нем еще body имеет отступы в 20%. Это только ИЕ не верно интерпретирует такое объявление, а все остальные броузеры делают колонку с отступами в 40%.

Лучше опишите так:

			html, body {
				padding: 0;
				margin: 0;
				height: 100%;
				background-color: Black;
			}
			body {
				margin: 0 20%;
			}

Edited July 1, 2009 by Searcher

]-[иколай · July 1, 2009

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

Я так понял, универсального метода без инзвращений никто еще не предложил?

]-[иколай · July 1, 2009

/удалено/

Edited July 1, 2009 by ]-[иколай

Great Rash · July 2, 2009

Универсального метода без извращений нет. К сожалению...

]-[иколай · July 2, 2009

Вот мой вариант решения проблемы.

<!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">
	<head>
		<title>padding</title>
		<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		html {
			width: 100%;
			height: 100%;
			background: pink;
		}
		body {
			width: 40%;
			margin-left:30%;
			margin-right:30%;
			height: 100%;
			background: transparent;
		}
		  div.top_bottom_spacer {
			height: 1%;
			background: transparent;
		}
		div#content{
			height: 98%;
			background: lime;
		}
		</style>
	</head>
	<body>
		<div class="top_bottom_spacer"></div>
		<div id="content">
			content
		</div>
		<div class="top_bottom_spacer"></div>
	</body>
</html>

Работает везде кроме IE6. Если кто-нибудь сможет сделать хак для ИЕ, буду очень благодарен. НЕ понимаю, почему он неправильно проценты высчитывает????

Sign In

Небольшой промежуточек

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information