Резиновый дизайн

Ogalig · September 5, 2008

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

Нужно 2 контейнерных элемента разместить на странице так, чтобы верхний был постоянной величины в 20 пикселей, а вот второй, который ниже, растягивался бы в зависимости от высоты страницы. На каких это элементах реализовать в общем-то не имеет значение. Пробовал сделать таблицей, присвоив одной ячейке фиксированную высоту, а второй не указывать высоту, но тогда всеравно растягиваются обе строки, даже та которая с фиксированной высотой.

Потом пробовал сделать на дивах, указав одному диву высоту 20 пикселей, а второму 100%, но тогда появляется полоса прокрутки, т.к. страница получается в высоту 100%+20 пикселей. Компромис, вроде указания высоты не 100, а, например, 80% не подходит.

Как быть прямо не знаю.

sum41 · September 7, 2008

а разве нижний элемент не будет растягиваться сам по себе в зависимости от содержимого?

Vlad · September 8, 2008

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

Ogalig · September 8, 2008

Растягиваться не будет. Если див будет пустой, то у него высота будет 0 пикселей, в ином случае высота равна высоте элементов в нем.

Я имел ввиду что высота второго дива должна быть равна высоте страницы - высота первого дива.

К сожалерию смог побороть это только с помощью expression. Но мне такое решение не нравиться очень. Так что если кто знает как это сделать одними ксс, то очень буду рад помощи.

Edited September 8, 2008 by Ogalig

sum41 · September 9, 2008

вот вариант

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<style type="text/css">
table {
width: 100%;
height: 100%;
}
td.verh {
height: 20px;
}
</style>
</head>

<body>
<table border="1">
<tr>
	<td class="verh">lorem</td>
</tr>
<tr>
	<td>ipsum</td>
</tr>
</table>
</body>
</html>

Нужно обязательно делать без DOCTYPE. С ним свойство height у таблицы работать не будет.

Ogalig · September 10, 2008

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

konopushka · September 10, 2008

Может быть просто вложить div(20px) во второй?

<!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></title>
<style type="text/css">
html, body  {
 margin: 0px; 
 padding: 0px; 
 height:100%;
}
#header {
	height:20px;
	position:absolute;
	top:0px;
	background-color:#ccc;
	width:100%;
}
#content {
	background-color:#fc0;
	height:100%;
}
</style>
</head>

<body>
<div id="content">
	<div id="header">
		height:20px
	</div>

</div>
</body>
</html>

Ogalig · September 10, 2008

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

Edited September 10, 2008 by Ogalig

Sign In

Резиновый дизайн

Question

Ogalig

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

sum41

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

sum41

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

konopushka

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information