ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS: различное поведение display: table на Chrome&Safery и IE&FF
23 сообщений из 23, страница 1 из 1
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724675
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Код: html
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.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		*, *:after, *:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html, body,
		.wrapper {
			margin: 0;
			padding: 0;
			height: 100%;
			background-color: lightgray;
		}

		.table {
			display: table;
			height: 100%;
			width: 100%;
			background-color: white;
		}

		.tableRow {
			display: table-row;
		}

		.tableCell {
			display: table-cell;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="table">
			<div class="tableRow">
				<div class="tableCell">
					<div style="height: 100%; overflow: auto">
						<pre>
						sadasd
						asda
						sd
						asd
						as
						das
						d
						asd
						as
						das
						d
						asd
						asd
						as
						da
						sd
						asd
						asd
						as
						das
						dddddda
						sd
						asd
						as
						da
						sd
						asd
						as
						das
						das
						d
						asd
						asd
						as
						das
						das
						d
						asd
						asd
						as
						dsa
						d
						asd
						asd
						sadsa
						das
						d
						asd
						asd
						as
						das
						d
						as
					</pre>
					</div>
				</div>
			</div>
			<div class="tableRow" style="height: 10%">
				<div class="tableCell">
					<pre>
						second row in the table
				</pre>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
...
Рейтинг: 0 / 0
20.08.2014, 15:37
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724680
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Извинияюсь, забыл засунуть под спойлер
...
Рейтинг: 0 / 0
20.08.2014, 15:38
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724710
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , это ты чем-то хвастаешь? Или спросить чего хочешь?
...
Рейтинг: 0 / 0
20.08.2014, 15:55
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724714
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Аааа, ворос в самой теме... Ясно.

Делай простой табличкой и будет тебе счастие...
...
Рейтинг: 0 / 0
20.08.2014, 15:57
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724770
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

дык будут пальцами тыкать и тюкать))
не пойму где тут глюк...
...
Рейтинг: 0 / 0
20.08.2014, 16:41
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38724838
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Ничо не понимаю под конец дня - сделал на таблицах - все тоже (
 

Код: html
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.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		*, *:after, *:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html, body,
		.wrapper {
			margin: 0;
			padding: 0;
			height: 100%;
		}

		table {
			table-layout: fixed;
			height: 100%;
			width: 100%;
			background-color: white;
			border: 1px solid black;
		}

	</style>
</head>
<body>
	<div class="wrapper">

		<table>
			<tr>
				<td>
						<ul style ="height: 100%; overflow: auto">
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
							<li>sadfesafd</li>
						</ul>
				</td>
			</tr>

			<tr style="height: 10%">
				<td>
					<pre>
						second row in the table
				</pre>
				</td>
			</tr>
		</table>

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


...
Рейтинг: 0 / 0
20.08.2014, 17:18
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725157
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , ты картинкой/картинками покажи, что нужно... И что в итоге не так получается...
...
Рейтинг: 0 / 0
21.08.2014, 08:18
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725160
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

вот так надо
...
Рейтинг: 0 / 0
21.08.2014, 08:30
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725168
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , я так понял окно нужно поделить на 2 части:
- верх
- низ
так?
У низа какая высота? Фиксированая? Или так же по контенту тянется?
...
Рейтинг: 0 / 0
21.08.2014, 08:39
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725169
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

низ, к примеру, пикселей 200, а верх скроллируемый - если контента больше чем высота ячейки
...
Рейтинг: 0 / 0
21.08.2014, 08:41
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725752
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spниз, к примеру, пикселей 200, а верх скроллируемый - если контента больше чем высота ячейки
Тогда и таблицы не нужны...
Как вариант...

 
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
#container {
	position: relative;
	height: 100%;
	min-height: 300px;
}
#up {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 200px;
	width: 100%;
	background-color: yellow;
}
#down {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 200px;
	background-color: green;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='container'>
	<div id='up'>
		<ul style ="height: 100%; overflow: auto">
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
			<li>sadfesafd</li>
		</ul>
	</div>
	<div id='down'></div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
21.08.2014, 16:00
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725756
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Это
Код: html
1.
<ul style ="height: 100%; overflow: auto">


я просто вставил из твоего сообщения... Сам стайл мне не важен, его запросто можно убрать.
...
Рейтинг: 0 / 0
21.08.2014, 16:03
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38725895
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

В FF&&IE ничего не поменялось - при уменьшении высоты окна верхняя строчка таблицы не уменьшается со скроллом, а просто добавляется скролл к странице а таблица остается изначальной высоты
...
Рейтинг: 0 / 0
21.08.2014, 17:22
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726054
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , смотрю в своем ИЕ11 - скролируется... В ФФ 31.0 так же все нормально...
...
Рейтинг: 0 / 0
21.08.2014, 20:35
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726056
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spа таблица остается изначальной высоты
Так в моем последнем примере нет таблиц... Там три ДИВа.
...
Рейтинг: 0 / 0
21.08.2014, 20:37
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726059
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

ха, так в том то и дело - абсолютное позиционирование не устраивает - нижний блок высота заранее не известная
...
Рейтинг: 0 / 0
21.08.2014, 20:45
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726062
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

почему же и затеял все это с таблицами
...
Рейтинг: 0 / 0
21.08.2014, 20:47
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726216
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spнижний блок высота заранее не известная
Так я ранее и пытался это выяснить. :) А ты написал, что
spниз, к примеру, пикселей 200, а верх скроллируемый - если контента больше чем высота ячейки
Если обе части "резинки", да еще одна должна иметь внутренний скрол, у меня есть сильное опасение, что без скрипта тут не сделать...

Поскольку резиновая ячейка не во всех браузерах дает диву занять 100% высоты. А без четкого указания высоты не будет внутренней прокрутки...
...
Рейтинг: 0 / 0
22.08.2014, 08:14
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726245
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

а как же - таблицы тебя спасут?...
...
Рейтинг: 0 / 0
22.08.2014, 09:11
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726256
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , они не всемогущи...
...
Рейтинг: 0 / 0
22.08.2014, 09:23
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38726282
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
krvsa,

и как мне быть? мне нужно такую задачу решить когда один блок неизвестной высоты а второй должен занимать всю оставшуюся высоту и скроллировать контент?
...
Рейтинг: 0 / 0
22.08.2014, 09:42
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38727049
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
spи как мне быть? мне нужно такую задачу решить когда один блок неизвестной высоты а второй должен занимать всю оставшуюся высоту и скроллировать контент?
Скрипт писать...
Обрабатывать изменение окна, пересчитывать размеры...
...
Рейтинг: 0 / 0
22.08.2014, 18:23
| Ответить | Цитировать | Написать  
CSS: различное поведение display: table на Chrome&Safery и IE&FF
    #38727052
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
sp , либо делать только скрол... Т.е. бутафорный, свой. Не стандартный. И обрабатывать т.с. прокрутку контента.
Хотя это почти то на то и выйдет...
...
Рейтинг: 0 / 0
22.08.2014, 18:25
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS: различное поведение display: table на Chrome&Safery и IE&FF
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38727049&tid=1446779]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 149ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 64ms
get tp. blocked users:
 1ms
others: 264ms
total:  518ms
созд. / загр.: 518ms
x
x
Закрыть


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