Три горизонтальных зоны со скролингом на странице ?

Celamoi

Дата: 01.04.2010 12:01:57

Доброго времени суток !
Подскажите, пожалуйста, как решить следующую задачу:
Следует разбить страницу на три части, в каждой показывается своя информация. Если некая часть переполняется, появляется полоска скролинга.

У меня получается сделать такое через блочный элемент div, если указать высоту в пикселях
типа

<style type="text/css">
        .style1
        {
            height: 330px;
            overflow:auto;
        }
</style>

</head>
<body>
<form id="form1" runat="server">
    
       <div class="style2">

       </div>

Если же указывать в % то не работает. А мне хотелось бы именно в % или точнее в частях страницы; ведь неизвестно заранее, какое разрешение у экрана пользователя, а хочется, чтобы он охватывал взглядом все три раздела сразу.

Я пробовал также через ячейки таблицы простой и asp, но эфекта не добился. Не хотелось бы задействовать механизм фреймов, потому, что нужно задумываться о передаче параметров (в каждый фрейм ведь загружается своя страница) и программировать одну страницу, хоть и сложную мне легче чем три

Буду благодарен за советы

Зритель с попкорном 5

Дата: 01.04.2010 12:17:41

Celamoi,

<!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>
		<title></title>
		<style type="text/css">
			html, body { height: 100%; margin: 0; padding: 0; }
			div { height: 33.33333%; overflow: auto; }
		</style>
	</head>
	<body>
		<div style="background-color: #f00;">a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br /></div>
		<div style="background-color: #0f0;">b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br />b<br /></div>
		<div style="background-color: #00f;">c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br />c<br /></div>
	</body>
</html>

Celamoi

Дата: 01.04.2010 12:48:28

Зритель с попкорном 5,

большое спасибо, все работает. И даже ясно как сделать блоки разной высоты. Если Вы из Киева - с меня пиво :)) Из другой местности не получится - большую часть посылки вылакают на почте

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

Зритель с попкорном 5

Дата: 01.04.2010 12:57:06

Celamoi,

Гм, с благодарностью 2 проблемы: я из Кишинёва и пиво не жалую :)

Да, для того что бы воспринималась высота в процентах нужен обязательно DOCTYPE и указание 100% высоты для <html> и <body>