Проблемы с фоном в div

medalist · April 7, 2010

Здравствуйте.

Подскажите пожалуйста, почему синий и зеленый фон только до конца экрана, а не доконца страницы?

http://medalist.narod.ru/Untitled-1.html

psywalker · April 7, 2010

повесь на боди МИн-высоту 100%, сейчас она у тебя просто 100%

medalist · April 7, 2010

повесил - бесполезно.

rediskavet · April 7, 2010

убери вообще у боди значение высоты, и у div-ов тоже.

medalist · April 7, 2010

убери вообще у боди значение высоты, и у div-ов тоже.

и что это даст?

rediskavet · April 7, 2010

и что это даст?

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

У тебя же конечная цель на пустые синий и зеленые блоки:?

medalist · April 7, 2010

Высота блока зависит от его наполнения, т.е. боди будет растягиваться чтобы вместить в себя блоки, а их высота в свою очередь будет увеличиваться в зависимости от наполнения.
У тебя же конечная цель на пустые синий и зеленые блоки:?

Я немного переделал пример

Чтобы было понятнее. В левой части будет только меню в правой контент сайта.

Если убрать body height:100% то блоки будут ровно того размера который требует контент, а мне нужно чтобы блоки тянулись на весь сайт, там должен быть фон.

psywalker · April 7, 2010

Я немного переделал пример
Чтобы было понятнее. В левой части будет только меню в правой контент сайта.
Если убрать body height:100% то блоки будут ровно того размера который требует контент, а мне нужно чтобы блоки тянулись на весь сайт, там должен быть фон.

Тогда оставь на боди и html 100%, далее сделай главный див, ему задай мин-ширину 100% и на него уже фон свой повесь

medalist · April 7, 2010

Тогда оставь на боди и html 100%, далее сделай главный див, ему задай мин-ширину 100% и на него уже фон свой повесь

:angry: вообще весело. сделал div с именем page покрасил розовым, вроде круто но он не до конца стр.

psywalker · April 7, 2010

вообще весело. сделал div с именем page покрасил розовым, вроде круто но он не до конца стр.

Ок, дружище, покажи мне скриншот того, что ты хочешь получить на выходе?

medalist · April 7, 2010

Ок, дружище, покажи мне скриншот того, что ты хочешь получить на выходе?

http://medalist.narod.ru/1.jpg

psywalker · April 7, 2010

Смотри, у тебя по идее блоки в сумме по ширине фиксированные, поэтому бери и вырезай полоску по ширине нужную, типа своих блоков. Далее делай то, что я писал постом выше и фон вешай также на контейнер главный.

medalist · April 8, 2010

Мне на винграде подсказали интересное решение

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
html, body {
	background-color:#FF0;
	height:100%;
	padding: 0; margin: 0;
	min-height:100%;
}
#left{
float: left;
width: 20%;
height:100%;
background-color:#339
}
#right{
float: right;
background-color:#0F9;
width: 70%;
height:100%;
}
</style>
<script type="text/javascript">
var loader = function()
{
	document.getElementById( "left" ).style.height = document.getElementById( "right" ).style.height = document.documentElement.scrollHeight + 'px';
}
</script>
</head>
<body onload="loader()">
<div id="right">
  <p>3 </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p>hj</p>
  <p> </p>
  <p> </p>
  <p> </p>
</div>
<div id="left">
2
</div>
</body>
</html>

Но в итоге всеравно сделал частично таблицами. все работает

ps а так хотелось поборотся за чистоту кода...

Sign In

Проблемы с фоном в div

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information