ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вписываем резиновый блок в абсолютный блок
14 сообщений из 14, страница 1 из 1
Вписываем резиновый блок в абсолютный блок
    #36644673
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
Задачка:
1) есть абсолютно спозиционированый блок под окно браузера.
2) в этот блок вписываются два других блока:
a) первый занимает столько места, сколько нужно, вписанному в него содержимому.
b) второй расположен ниже и занимает все оставшееся место, его содержимое прокручиватся скролом.

вот примерчик:

 
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			* {border: dashed 1px # 363636 ;}
				div.example {
				margin: auto 10px;
				padding: 1em;
				top: 100px;
				bottom: 20px;
				width:  40 %;
				position:absolute;
				/*				 overflow:hidden;*/
			}
		</style>
	</head>
	<body>
		Пыщь - пыщь....
		<div class="example">
			<div style="background-color:yellow">
				<H1>Тест!!!</H1>
			</div>
			<div style="background-color:green;height:100%;overflow:scroll;">
				<table style="width:100%">
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
					<tr><td>data  1 </td><td>data  2 </td></tr>
				</table>
			</div>
		</div>
	</body>
</html>


Проблема в том, что нижний блок при height:100% игнорирует вышестоящий блок и вылезает за пределы контерера вместе о своим скролом. overflow:hidden; у основного блока не решает проблему, т.к. отрезает нижний кролл.
...
Рейтинг: 0 / 0
24.05.2010, 10:25:13
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36644713
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT ManПроблема в том, что нижний блок при height:100% игнорирует вышестоящий блок и вылезает за пределы контерера
И это естественно! Ведь он стал размером с родительский ДИВ.
...
Рейтинг: 0 / 0
24.05.2010, 10:41:37
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36644734
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT ManВписываем резиновый блок в абсолютный блок
В действительности ты "вписываешь" два резиновых (по вертикали) блока в один... Как он позиционирован не имеет значения...
...
Рейтинг: 0 / 0
24.05.2010, 10:53:22
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36644813
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот так

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<html>
<head>
<style>
* {
	border: dashed 1px # 363636 ;
}
div.example {
	margin: auto 10px;
	padding: 1em;
	top: 100px;
	bottom: 20px;
	width:  40 %;
	position:absolute;
}
#my_win {
	width:  100 %;
	height:  100 %;
}
#my_head {
	height:  1 %;
}
#my_cont {
	height:  99 %;
}
#head {
	background-color:yellow;
}
#cont {
	height:  100 %;
	overflow: auto;
}
#cont table {
	width: 100 %;
}
</style>
</head>
<body>
Пыщь - пыщь....
<div id='win' class="example">
	<table id='my_win'>
	<tr>
		<td id='my_head'>
		<div id='head'>
			<H1>Тест!!!</H1>
		</div>
		</td>
	</tr>
	<tr>
		<td id='my_cont'>
		<div id='cont'>
			<table>
				<tr><td>data  1 </td><td>data  2 </td></tr>
			</table>
		</div>
		</td>
	</tr>
	<table>
</div>
</body>
</html>

Опера показывает так, как ты хотел. Остальные пока кладут...
...
Рейтинг: 0 / 0
24.05.2010, 11:35:45
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36644821
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
krvsa, согласен но от этого задача легче не становиться.
...
Рейтинг: 0 / 0
24.05.2010, 11:41:12
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645036
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT Man , дело в том, что сам блок

Код: plaintext
1.
2.
<div id='win' class="example">
</div>

ведёт себя по-разному в разных браузерах. В ФФ он имеет постоянный размер. В Опере растягивается контентом... В ИЕ6.0 вообще не позиционируется как тебе нужно.

Т.ч. слишком много чего нестыкуется...

Тебе сильно бы помогло если хоть что-то имело четкий, фиксированый размер.
...
Рейтинг: 0 / 0
24.05.2010, 12:50:23
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645418
Фотография Flying-home
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Flying-home
Участник
krvsa,

А можно немного в тему вопрос?
Такое, как на картинке, вообще в природе возможно? Под "абсолютным" дивом понимать что-то вроде

Код: plaintext
1.
2.
3.
4.
5.
6.
        .cnt{
            position:absolute;
            width: 80 %;
            height: 80 %;
            left: 10 %;
            top: 10 %;}
Хочется, чтоб скроллы появлялись там, где надо, но чтоб прокручивали содержимое этого самого дива, поскольку в окне браузера вообще нечего прокручивать.

2all
Может, кто-то видел подобное?
...
Рейтинг: 0 / 0
24.05.2010, 15:16:08
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645441
Фотография Flying-home
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Flying-home
Участник
мнэээ.
Написал, и понял, что неправильно подхожу к проблеме. Надо отбивать текст паддингом, а сверху на него накладывать четыре картинки в абсолютных дивах по краям.
...
Рейтинг: 0 / 0
24.05.2010, 15:23:23
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645443
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Flying-home , скролы будут крутить только "свой" контент. Мало того! Если у элемента крутить нечего - то и скролов с ползунком не будет.
...
Рейтинг: 0 / 0
24.05.2010, 15:23:36
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645487
Фотография Flying-home
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Flying-home
Участник
Да это понятно. Напоминает изобретение вечного двигателя. Знаю, что невозможно, а хочется. Но саму идею дизайна ты понял? Может, можно реализовать подобное другими способами? В какую сторону копать?
...
Рейтинг: 0 / 0
24.05.2010, 15:38:54
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36645523
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Flying-homeВ какую сторону копать?
Х/з... Я вообще к скролам отношусь как к вынужденому элементу, а не как к элементу дизайна.
...
Рейтинг: 0 / 0
24.05.2010, 15:52:20
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36648945
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
Продолжение изощрений:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
/*			* {border: dashed 1px #363636;} */
			.article {
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-moz-box-shadow: 0  1px 1px #E3E5EB;
				-webkit-box-shadow: 0  1px 1px #E3E5EB;
				border:1px solid #BBBBBB;
				overflow:hidden;
				background-color:#FAFAFA;
				position:absolute;
				bottom:10px;
				top:10px;
				left:10px;
				right:10px;
				padding:5px;
			}		
		</style>
	</head>
	<body>
		<div class="article">
			<div style="display:table; width:100%;height:100%">
				<div style="display:table-row;">
					<div style="display:table-cell;width:50%;background-color:blue">
						<h3>Table  1 :</h3>
					</div>
					<div style="display:table-cell;width:50%;background-color:red">
						<h3>Table  2 :</h3>
					</div>
				</div>
				<div style="display:table-row;height:100%">
					<div style="display:table-cell;width:50%;background-color:green;height:100%">
						<div style="overflow-y: scroll;height:100%">
							<table style="width:100%">
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
							</table>
						</div>
					</div>
					<div style="display:table-cell;width:50%;background-color:yellow;height:100%">
						<div style="overflow-y: scroll;height:100%">
							<table style="width:100%">
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
								<tr><td>data  1 </td><td>data  2 </td></tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</body>
</html>
В результате: Chrome как надо показывает, Opera и IE обрезают скролл, Mozilla вообще без скролла.
Дальше как изощряться даже не знаю :(
...
Рейтинг: 0 / 0
25.05.2010, 23:57:40
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36649296
NT Man
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
NT Man
Гость
Мозилку победил :)
Осталось вылечить отрезание скролла в опере и IE.
 

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
/*			* {border: dashed 1px #363636;} */
			.article {
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-moz-box-shadow: 0  1px 1px #E3E5EB;
				-webkit-box-shadow: 0  1px 1px #E3E5EB;
				border:1px solid #BBBBBB;
				overflow:hidden;
				background-color:#FAFAFA;
				position:absolute;
				bottom:10px;
				top:10px;
				left:10px;
				right:10px;
				padding:5px;
			}
        .content{
          position: absolute;
          overflow: auto;
          width:  100 %;
          top: 0px;
          left:  0 ;
          bottom: 0px;
        }
		</style>
	</head>
	<body>
		<div class="article">
			<div style="display:table; width:100%;height:100%">
				<div style="display:table-row;">
					<div style="display:table-cell;width:50%;background-color:blue">
						<h3>Table  1 :</h3>
					</div>
					<div style="display:table-cell;width:50%;background-color:red">
						<h3>Table  2 :</h3>
					</div>
				</div>
				<div style="display:table-row;height:100%">
					<div style="display:table-cell;width:50%;background-color:green;height:100%">
						<div style="position:relative;height:100%">
							<div class="content">
								<table style="width:100%">
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
								</table>
							</div>
						</div>
					</div>
					<div style="display:table-cell;width:50%;background-color:yellow;height:100%">
						<div style="position:relative;height:100%">
							<div class="content">
								<table style="width:100%">
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
									<tr><td>data  1 </td><td>data  2 </td></tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
	</body>
</html>
...
Рейтинг: 0 / 0
26.05.2010, 10:19:36
| Ответить | Цитировать | Написать  
Вписываем резиновый блок в абсолютный блок
    #36649308
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
NT Man , свойство дисплэй вообще поддерживается браузерами частично ...

То, что ты добился таких результатов в этом примере уже впечатляет!
...
Рейтинг: 0 / 0
26.05.2010, 10:23:46
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вписываем резиновый блок в абсолютный блок
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36648945&tid=1453049]:
 0ms
get settings:
 4ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 222ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 36ms
get tp. blocked users:
 1ms
others: 199ms
total:  485ms
созд. / загр.: 485ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]