Растянуть фон DIV по высоте DIV float

romlex · November 19, 2008

Всем привет!

Много искал но так ничего подобного и не нашел о том как растянуть фоновый DIV по высоте вложенного в него элемента DIV с обтеканием!

Давно с таким не сталкивался, всегда делал таблицей, но тут другой вариант, таблицей нельзя!

Причем в IE все работает "нормально" - а может и на оборот Opera глючит Вобщем надо, чтоб растягивался фон!

т.е. там есть зеленый фон, он должен растянуться взависимости от высоты плавающих элементов, т.е. НЕ FIX.

Если решение возможно, буду очень благодарен!!!

Вот пример:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bg{margin-left:auto; margin-right:auto; margin-top:100px; background:#00FF99; width:600px;}
.left{ float:left; background:#993333; width:100px;}
.right{float:right; background:#3366FF; width:500px;}
</style>
</head>
<body>
<div class="bg">
	<div class="left">menu</div>
	<div class="right">content<br />content<br />content<br />content<br />content<br />content<br /></div>
</div>
</body>

hmelii · November 19, 2008

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bg{ margin:100px auto 0; background:#0f9; overflow:hidden; width:600px;}
.left{ float:left; background:#933; width:100px;}
.right{float:right; background:#36f; width:500px;}
</style>
</head>
<body>
<div class="bg">
	<div class="left">menu</div>
	<div class="right">content<br />content<br />content<br />content<br />content<br />content<br /></div>
</div>
</body>
</html>

Edited November 19, 2008 by hmelii

romlex · November 19, 2008

КЛАСС!!! СПАСИБО hmelii !!!

Логики overflow я конечно не понял... Но самое главное работает! Хе-хе!

Edited November 19, 2008 by romlex

iGusse · December 17, 2008

Привет, сталкнулся с такой же траблой решил ее так:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.cont{margin:auto auto;width:600px}
.bg{float:left;margin-top:100px;background:#00FF99}
.left{float:left;background:#933; width:100px}
.right{float:right;background:#36F; width:500px}
</style>
</head>
<body>
<div class="cont">
<div class="bg">
		<div class="left">menu</div>
		<div class="right">content<br />content<br />content<br />content<br />content<br />content<br /></div>
</div>
</div>
</body>

Faust · December 17, 2008

а можно еще вот так

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bg{ margin:100px auto 0; background:#0f9; width:600px;}
.left{ float:left; background:#933; width:100px;}
.right{margin-left:100px; background:#36f; width:500px;}
</style>
</head>
<body>
<div class="bg">
	<div class="left">menu</div>
	<div class="right">content<br />content<br />content<br />content<br />content<br />content<br /></div>
</div>
</body>
</html>

Но первый способ помоиму самый прикольный зачет!!!!!!

Омск · August 29, 2011

Мне в шапке сайта нужно растянуть фон в блоке div. Я написал так:

.block1 {

background-image: url(images/top.gif);

background-size:100%;

width:100%;

height:100px;

} И получилось искаженное изображение - http://b-srv.ru/test.html

А надо чтобы было как на этой странице - http://b-srv.ru/index.html, тут разметка сделана таблицей - на каждой странице приходится прописывать тоже что и на всех остальных.

Пробовал так - .bg{ margin:100px auto 0; background:#0f9; overflow:hidden; width:100%;}, изображение получалось маленьким, когда увеличивал, искажалось.

Как тут можно сделать?

Sign In

Растянуть фон DIV по высоте DIV float

Question

romlex

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

hmelii

Link to comment

Share on other sites

romlex

Link to comment

Share on other sites

iGusse

Link to comment

Share on other sites

Faust

Link to comment

Share on other sites

Омск

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information