Граница div уезжает за пределы окна в FireFox

Andrewvp · September 12, 2009

Такой вот стиль:

	   
#header	   {
	position: absolute;
	top: 0; 
	left: 0;
	width:100%; 
	height: 100px;
   	border-style: solid;
   	border-width: 1px;
   	border-color:red;
}

правая граница в FF (3.0) находится за пределами экрана. Чего ему, лису, добавить?

mishka · September 12, 2009

Ширина вашего блока 100% + 2px бордера поэтому и вылазит за пределы окна.

Andrewvp · September 12, 2009

Ну это понятно, но как сделать так, чтобы граница "входила" в эти 100%?

Короче говоря, как отобразить div в firefox с рамками на ширину окна браузера?

s0rr0w · September 12, 2009

Ну это понятно, но как сделать так, чтобы граница "входила" в эти 100%?
Короче говоря, как отобразить div в firefox с рамками на ширину окна браузера?

Не ставить width: 100%

Andrewvp · September 13, 2009

Не ставить width: 100%

А если div содержит только абсолютно позиционируемые элементы? Тогда FF отрисовывает его с нулевым размером.

mishka · September 13, 2009

Родительский блок на абсолют и ширину ему 100%, а внутри еще блок с бордерами и без ширины, он сам растянется по родителю.

Andrewvp · September 14, 2009

Родительский блок на абсолют и ширину ему 100%, а внутри еще блок с бордерами и без ширины, он сам растянется по родителю.

Ок, сегодня вечером попробую..

Andrewvp · September 14, 2009

Родительский блок на абсолют и ширину ему 100%, а внутри еще блок с бордерами и без ширины, он сам растянется по родителю.

Не работает

Следующая страница:

<?xml version="1.0" encoding="windows-1251"?>
<!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="ru" lang="ru">
<head>
	<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
	<style type='text/css'>
		html {
			overflow: hidden;
			width: 100%;
		}

		.mainBodyBG {
			background-color: #EFEFEF;
			overflow: hidden;
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
		}

		.topComponent {
			border-style: solid;
			border-width: 1px;
			border-color: red;
			position: absolute;
			height: 100px;
			top: 0;
			left: 0;
			overflow: visible;
		}

		.topComponentContent {
			border-style: solid;
			border-width: 1px;
			border-color: blue;
			position: absolute;
			height: 98px;
			overflow: visible;
		}

		.topBanner {
			position: absolute;
			border-style: none;
			top: 10px;
			left: 512px;
		}
	</style>
</head>
<body class='mainBodyBG'>
	<div style="width: 100%; position: absolute; top: 0; left: 0">
		<div class='topComponent' id="header">
			<div class='topComponentContent' id="header_content">
				<a href='http://www.donor.org.ua/index.php?module=help' class='topBanner'>
					<img alt="" src='banner/donor_2.gif' /></a>
			</div>
		</div>
	</div>
</body>
</html>

В FF 3.0 результат не достигнут - рамки div внутри страницы сворачиваются до нулевого размера

Edited September 14, 2009 by Andrewvp

psywalker · September 14, 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="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
	* { margin: 0; padding: 0;}
	div.relative { 
		position: relative; 
		border: 1px solid #000; 
		border-width: 0 6px;
		height: 100px;
	}
	div.absolute { 
		position: absolute; 
		height: 100px; 
		width: 100%; 
		background: red;
	}
</style>
</head>
<body>
	<div class="relative">
		<div class="absolute">ABSOLUTE</div>
	</div>

</body>
</html>

Andrewvp · September 15, 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="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
    * { margin: 0; padding: 0;}
    div.relative {
        position: relative;
        border: 1px solid blue;
        height: 100px;
    }
    div.absolute {
        position: absolute;
        height: 100px;
        width: 100%;
        border: 1px solid red;
    }
</style>
</head>
<body>
    <div class="relative">
        <div class="absolute">ABSOLUTE</div>
    </div>

</body>
</html>

на скриншоте видно, что правая красная граница находится за пределами окна:

psywalker · September 15, 2009

Я тебе разве так сказал делать? почему ты по своему переделываешь, посмотри как у меня

mishka · September 15, 2009

Не работает!
бордер элемента, который абсолютно позиционирован, находится за пределами окна:

Так, толькочто написал много нехороших слов, потом стер.

Начните думать! Перестаньте просто копипастить!

div.absolute {
position: absolute;
height: 100px;
width: 100%;
border: 1px solid red;
}

Я вам что говорил по поводу ширины 100% и бордеров по бокам? Зачем это тупо копипастите?

Я вам про это говорил

Дата 13.9.2009, 18:49
Родительский блок на абсолют и ширину ему 100%, а внутри еще блок с бордерами и без ширины, он сам растянется по родителю.

<!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="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
* { margin: 0; padding: 0;}
div.absolute {
position:absolute;
top:0;
left:0;
width:100%;
}
div.box {
height: 98px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="absolute">
	<div class="box">ABSOLUTE</div>
</div>

</body>
</html>

Edited September 15, 2009 by mishka2

psywalker · September 15, 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="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
	* { margin: 0;}

	div {
		position: absolute;
		border: 10px solid #000;
		border-width: 0 10px;
		left: 0;
		right: 0;
		height: 100px;
		background: red;
	}
</style>
</head>
<body>
	<div>ABSOLUTE</div>
</body>
</html>

Andrewvp · September 16, 2009

Ага, теперь дошло.

Во-первых, абсолютно позиционированному элементу плевать на размеры родителя. Сначала проверяйте.

Решение довольно простое:

div {
		position: absolute;
		border: 1px solid #000;
		left: 0;
		right: 0;
	}

Совсем забыл, что в FF можно позиционировать две точки div, в отличие от IE

Всем спасибо

psywalker · September 16, 2009

Ага, теперь дошло.
Во-первых, абсолютно позиционированному элементу плевать на размеры родителя. Сначала проверяйте.
Решение довольно простое:
div {
		position: absolute;
		border: 1px solid #000;
		left: 0;
		right: 0;
	}
Совсем забыл, что в FF можно позиционировать две точки div, в отличие от IE
Всем спасибо

Это ты о чём? Во первых я те вариант привёл рабочий, чтобы ты его под себя сделал, во вторых тебе высоту для наглядности поставил, что-бы тебе легче было ориентироваться в пространстве, и в третьих спасибо тебе за решение, без тебя бы мы даже и не узналибы о таком

Andrewvp · September 16, 2009

Это ты о чём? Во первых я те вариант привёл рабочий, чтобы ты его под себя сделал, во вторых тебе высоту для наглядности поставил, что-бы тебе легче было ориентироваться в пространстве, и в третьих спасибо тебе за решение, без тебя бы мы даже и не узналибы о таком

"Рабочим" был второй вариант первый - нет.

mishka · September 16, 2009

Во-первых, абсолютно позиционированному элементу плевать на размеры родителя.

Вы несовсем правы! Дело в том что элемент на абсолюте позиционируется онтносительно ближайшего родителя с релейтивом либо абсолютом, вот на его размеры ему не плевать.

div {
position: absolute;
border: 1px solid #000;
left: 0;
right: 0;
}

Это неподдерживает ие6-7.

Andrewvp · September 17, 2009

Это неподдерживает ие6-7.

А я про IE и не спрашивал

psywalker · September 17, 2009

Вы несовсем правы! Дело в том что элемент на абсолюте позиционируется онтносительно ближайшего родителя с релейтивом либо абсолютом, вот на его размеры ему не плевать.
Это неподдерживает ие6-7.

Разве ИЕ7 не поддерживает?

Sign In

Граница div уезжает за пределы окна в FireFox

Question

Link to comment

Share on other sites

18 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

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