Растягивание блока по ширине

WhiteNight · December 16, 2010

Хочется сделать стандартное расположение блоков, т.е.шапка - за ней контент.

Но в коде они идут наоборот: контент, потом шапка.

Для того чтобы поднять шапку, делаю position: absolute; top: 0; - но при таком позиционировании блок не растягивается на ширину коннтейнера.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="WhiteNight" />
<style>
*{margin:0; padding:0;}
html ,body {
	margin: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	}
#wrapper {
	background-color: gray;
	margin: 0 auto;
	max-width: 1256px;
	min-width: 1000px; 
	text-align: center;	
}
#content {
	margin-top: 165px;
}
#header {
	position: absolute;
	top: 0; 
	height: 164px;
	background-color: red; 
}
#footer {

}
</style>
	<title>Неназванный 2</title>
</head>

<body>
<div id="wrapper">
	<div id="content">
	content
	</div>
	<div id="header">header</div>
	<div id="footer">footer</div>
</div>


</body>
</html>

Как добиться одновременно и абсолютного позиционирования и растягивание на ширину родительского блока?

deadrash · December 16, 2010

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

WhiteNight · December 16, 2010

Что-то у меня не получается

Если #wrapper {

position: relative;

}

#header {

top: 0;

}

то позиционирование не происходит.

Edited December 16, 2010 by WhiteNight

deadrash · December 16, 2010

Покажите код.

WhiteNight · December 16, 2010

<head>

<style>

*{margin:0; padding:0;}

html ,body {

margin: 0;

width: 100%;

height: 100%;

text-align: center;

}

#wrapper {

position: relative;

background-color: gray;

margin: 0 auto;

max-width: 1256px;

min-width: 1000px;

text-align: center;

}

#content {

margin-top: 165px;

}

#header {

top: 0;

height: 164px;

background-color: red;

}

#footer {

}

</style>

<title>Неназванный 2</title>

</head>

<body>

content

</div>

<div id="header">header</div>

<div id="footer">footer</div>

</div>

</body>

</html>

deadrash · December 16, 2010

#header {
width: 100%;
height: 164px;
background-color: red;
position: absolute;top: 0;
}
#wrapper {
position: relative;
background-color: gray;
margin: 0 auto;
padding-top: 1px;
max-width: 1256px;
min-width: 1000px;
text-align: center;
}

WhiteNight · December 16, 2010

Имеем такие глюки:

По-моему код мой и не смотрели, который я привел...

Edited December 16, 2010 by WhiteNight

deadrash · December 16, 2010

У меня в фаерфоксе этого нет, но других броузеров нет, что бы проверить

WhiteNight · December 16, 2010

У меня в фаерфоксе этого нет, но других броузеров нет, что бы проверить

Вторая картинка - фаерфокс. При прописывании 100% для блока header, он берет 100% не родительского блока, а ширины страницы. Вот глюк и получается.

Если бы я хотел сделать только для FF, уже давно придумал бы что-то :facepalmxd:

deadrash · December 16, 2010

У меня ФФ и ничего подобного нет, попробуйте просто скопировать мой вариант.

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

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="WhiteNight" />
<style>
*{margin:0; padding:0;}
html ,body {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
}
#wrapper {
position: relative;
background-color: gray;
margin: 0 auto;
padding-top: 1px;
max-width: 1256px;
min-width: 1000px;
text-align: center;
}
#content {
margin-top: 165px;
}
#header {
width: 100%;
height: 164px;
background-color: red;
position: absolute;top: 0;
}
#footer {

}
</style>
<title>Неназванный 2</title>
</head>

<body>
<div id="wrapper">
<div id="content">
content

</div>
<div id="header" class="aname">header</div>
<div id="footer">footer</div>
</div>


</body>
</html>

Edited December 16, 2010 by deadrash

WhiteNight · December 16, 2010

У меня ФФ и ничего подобного нет, попробуйте просто скопировать мой вариант.

padding-top: 1px; - дело похоже в этом. Попробуйте его убрать и увидите результат.

Но в IE все так же плохо :facepalmxd:

P.S. - в IE решается добавлением left: 0; для #header

Edited December 16, 2010 by WhiteNight

deadrash · December 16, 2010

padding-top: 1px; - дело похоже в этом. Попробуйте его убрать и увидите результат.

Да, паддинг топ там неспроста.

Но в IE все так же плохо
P.S. - в IE решается добавлением left: 0; для #header

Вечно этот ИЕ всё гадит! Как же он достал ...

Sign In

Растягивание блока по ширине

Question

Link to comment

Share on other sites

11 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information