Как растянуть div по высоте родительского элемента?

python · February 11, 2008

Всем привет!

Собственно, у меня есть три колонки, две с фиксированной шириной по краям и одна в центре занимает все остальное пространство. Div#center служит для того, чтобы сделать границы между боковыми колонками и центральной. В нем находится заголовок и еще один div.content с границей по краям, при чем у заголовка границ быть не должно. Границы div.content соединяются с картинкой в td#content_footer, но только когда центральная колонка больше по длине, чем две соседние. Подскажите, как можно сделать так чтобы границы div.center примыкали к картинке в td#content_footer.

<!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>
	<title>TITLE</title>
	<style type="text/css">
	td {
		padding: 0px;
	}
	div.header
	{
		height:120px;
		width: 100%;
	}
	td.flank {
		background: #e7eef0 url(question_files/flank_bg.png) repeat-y;
		width: 250px;
		vertical-align: top;
	}
	div#center {
		margin-left: 4px;
		margin-right: 4px;
		margin-bottom: 0px;
		position: relative;
	}
	div.title_text {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #000000;
		font-weight: bold;
		padding: 23px 0px 0px 17px;
	}
	div.title {
		background-image: url(/img/title.jpg);
		background-color: #b8cecd;
		background-repeat: no-repeat;
		background-position: top right;
		height: 53px;
		width: 100%;
	}
	div.content {
		position: relative;
		text-align: left;
		border-left-width: 3px;
		border-right-width: 3px;
		border-top-width: 3px;
		border-bottom-width: 0px;
		border-color: #abc3c9;
		border-style: solid;
		font-family: Helvetica, sans-serif, Arial;
		font-size: 14px;
		color: #666666;
		margin-bottom: 0px;
		padding-bottom: 5px;
	}
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="header">
	HEADER
</div>
<div style="width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td class="flank">
				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN

				LEFTCOLUMN


			</td>
			<td valign="top">
				<div id="center">
					<div class="title"><div class="title_text">Новые альбомы</div></div>
					<div class="content">
						CONTENT
					</div>
				</div>
			</td>
			<td class="flank">
				RIGHTCOLUMN
			</td>
		</tr>
		<tr>
		<td valign="top">
			<img src="question_files/leftbottom.png" alt="" border="0" height="20" width="250" />
		</td>
		<td valign="top" id="content_footer">
			<div style="border: 0px solid rgb(171, 195, 201); margin-left: 4px; margin-right: 4px; background: rgb(231, 238, 240) url(question_files/center-bottom_bg.png) repeat-x scroll 0%; height: 20px; font-size: 1px;">
				<img src="question_files/coner.png" alt="" align="left" border="0" height="20" width="20" />
				<img src="question_files/border-color.png" alt="" align="right" border="0" height="20" width="3" />
			</div>
		</td>
		<td valign="top">
			<img src="question_files/leftbottom.png" alt="" border="0" height="20" width="250" />
		</td>
		</tr>
	</tbody>
</table>
</div>	
<div style="width: 100%; padding-left: 30px; height: 50px;"> 
	FOOTER
</div>
</body>
</html>

Scrum · February 11, 2008

Коль уж таблицами балуетесь, не проще добавить еще одну строку между div.center и td#content_footer. ? куда собственно и добавить "Границу примыкания".

python · February 11, 2008

Картина получается такая

это заголовки									  [—-]  [——-] [—-]
												   *	*  *	   * *	*
это сам текст и в нем							  *	*  *	   * *	*
может быть несколько заголовков					*	*  [——-] *	*
вокруг заголовка границы нет					   *	*  *	   * *	*
												   *	*  *	   * *	*
это примыкающие к центру картинки				  +*****  +******** +*****

получается боковые границы плавно переходят в изображение в td.content_footer.

По аналогии работают и боковые колонки, но там все делается с помощью фона(background'а), так как их ширина заранее известна. В центре тоже самое не получается.

не проще добавить еще одну строку между div.center и td#content_footer. ? куда собственно и добавить "Границу примыкания".

Не совсем понял, что имеется ввиду.

Коль уж таблицами балуетесь

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

python · February 11, 2008

http://pythoner.narod.ru/index.html

Sign In

Как растянуть div по высоте родительского элемента?

Question

python

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

python

Link to comment

Share on other sites

python

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information