Вопрос по растягиванию элемента в CSS

goodguy · May 3, 2009

Всем привет. В общем, вопрос такой, вот код страницы:

<!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>trial</title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>

<body>
<div id="top"></div>
<div id="menubar"></div>

<div id="navi_bar"><a href="#" class="friends">Friends</a><a href="#" class="wall">Wall</a><a href="#" class="bookmarks">Bookmarks</a><a href="#" class="settings">Settings</a></div>
<div id="block"></div>
</div>
</body>
</html>

вот описание в css:

@charset "utf-8";
/* CSS Document */
body
{
	padding:0px;
	width:800px;
	margin:0;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	background-color:#dbf1da
}


#block /*нужно настроить*/
{
	position:relative; 
	background-color:#c2eac0;
	width:278px;
	float:right;
	margin-top:0px;
	margin-bottom:30px;
	height:100%;
	padding:10px;
	text-align:justify;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}
#top
{
	height:149px;
	width:800px;
	background-image:url(images/top.jpg)
}
#menubar
{
	height:39px;
	width:800px;
	background-image:url(images/menu_bar.png)
}
#navi_bar
{
	height:30px;
	width:800px;
	margin-top:0px;
	background-image:url(images/navi_bar.png)
}
div#navi_bar > a:link, a:visited
{
	color:#FFF;
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:12px;

}
div#navi_bar > a:hover
{
	color:#360;
	text-decoration:none;
	font-size:12px
}
.friends 
{
	margin-left:0px;
	position: relative; top: 6px;
	padding-left:40px;
	padding-right:33px;
	padding-bottom:10px;
	padding-top:6px;
}
.wall
{
	margin-left:0px;
	position: relative; top: 6px;
	padding-left:48px;
	padding-right:48px;
	padding-bottom:10px;
	padding-top:6px;

}
.bookmarks
{
	margin-left:0px;
	position: relative; top: 6px;
	padding-left:30px;
	padding-right:18px;
	padding-bottom:10px;
	padding-top:6px;

}
.settings
{
	margin-left:0px;
	position: relative; top: 6px;
	padding-left:40px;
	padding-right:37px;
	padding-bottom:10px;
	padding-top:6px;

}

#footer
{
	width:800px;
	height:30px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:1000px;
	background-color:#063;
	position:relative;
	top:0px;
}

вот так страница выглядит сейчас:

Требуется следующее: тот прямоугольник, на котором стоит курсор должен растягиваться вниз почти на всю высоту экрана, при этом не доходя до низа на 30 пикселов. Главное, чтобы так было на экране с любым разрешением. И второе он должет продолжать растягиваться в высоту при добавлении в него элементов, ну, например, картинок или ссылок.

Как это можно это реализовать только средствами css?

З.Ы. То, что нужно настроить пометил комментарием в коде <_<

Edited May 3, 2009 by goodguy

Nekromancer · May 3, 2009

максимум что я могу придумать это.

#block 
{
position:absolute;
top: 179;
right: 0;
bottom: 30px;
background-color:#c2eac0;
width:278px;
margin: 0;
height:100%;
min-height: 100%;
height: auto !important;
padding:10px;
text-align:justify;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}

П.С. в ИЕ 6 не всё будет работать.

goodguy · May 3, 2009

Nekromancer, спасибо, но, к сожалению не работает <_< . Это поле просто смещается немного вниз, пикселов на 100. Проверял в опере 9.64 и последней версии огнелиса.

Lincky · May 6, 2009

если колонка не тянется по ширине, можешь вырезать такой же длины картинку, высотой 1px, всавить бэком для блока.

а вообще почитай это http://trifler.ru/blog/i/layouts/ideal/source.htm..длжно пригодиться!!!

goodguy · May 10, 2009

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

Не смотря на то, что я задал длину строки таблицы и ширину ячейки,

div#picarea /*контейнер содержащий таблицу, так как мне нужны несколько страниц одна под одной, с одинаковыми параметрами ширины и цвета*/
{
	position:relative;
	float:right;
	width:298px;
}

div#picarea > table 
{
	cellspacing:0px;
	background-color:#c2eac0;
	width:298px;
	float:right;
	padding:0px;
	text-align:justify;
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}

tr.p /*таблица для фотки*/
{
	width:278px;
	height:inherit;

}

td.pics
{
	width:260px;
	height:100%;
}

картинка всё равно ее растягивает по ширине.

Подскажите как этого избежать? :rolleyes:

Как я уже убедился, картинка-распорка здесь абсолютно бесполезна

Edited May 10, 2009 by goodguy

psywalker · May 10, 2009

goodguy

А если сделать картинку нужной ширины, тоесть подогнать её под ячейку?

Sign In

Вопрос по растягиванию элемента в CSS

Question

goodguy

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Nekromancer

Link to comment

Share on other sites

goodguy

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

goodguy

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information