ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css: не скроллируется контент внутри td в FF и IE.
10 сообщений из 10, страница 1 из 1
css: не скроллируется контент внутри td в FF и IE.
    #38731276
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
Добрый день!
наверняка кто-то на эти грабли уже наступал и знает ответ - я не верстальщик, поэтому не знаю и прошу помощи.
Контент в ячейках td не скроллируется только в FF и IE в других браузерах все нормально.

Код страницы под спойлером

 

Код: 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.
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.
170.
171.
172.
173.
174.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<meta name="MobileOptimized" content="320" />
	<meta name="HandheldFriendly" content="true">
	<meta name="format-detection" content="address=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-precomposed.png">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<link rel="shortcut icon" href="favicon.ico" />

	<title></title>
	<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet" />
	<style>
		*, *:after, *:before {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html,
		body {
			font-family: Helvetica,Verdana,Arial,Sans-Serif;
			margin: 0;
			padding: 0;
			height: 100%;
		}

		.table {
			display: table;
			width: 100%;
			height: 100%;
		}

		.tr {
			position: relative;
			display: table-row;
			border-collapse: collapse;
			table-layout: fixed;
		}

		.td {
			position: relative;
			display: table-cell;
			vertical-align: top;
			text-align: left;
		}

		.w100 {
			width: 100%;
		}

		.h100 {
			height: 100%;
		}

		.bordered {
			border: 1px solid black;
		}

		.page {
			padding: 0;
			margin: 0 auto;
			width: 70%;
			min-width: 320px;
			max-width: 1280px;
		}

		.left-menu {
			width: 200px;
		}

		.header {
			height: 70px;
		}

		.content-header {
			height: 1%;
			background-color: lightgray;
		}

		.content-body{
			height: 100%;
			overflow: auto;
		}

		.list {
			height: 100%;
			overflow: auto;
		}

		@media screen and (max-width: 1286px) {
			.page {
				width: 900px;
			}
		}


		@media screen and (max-width: 900px) {
			.page {
				width: 100%;
			}
		}

		@media screen and (max-width: 640px) {
			.left-menu {
				position: absolute;
				left: -200px;
			}
		}
	</style>
</head>
<body>
	<div class="wrapper table">
			<div class="td" style="text-align: center">
				
				<div class="page table">
					<div class="tr">
						<div class="header bordered td">header</div>
					</div>
					<div class="tr">
						<div class="table">
							<div class="left-menu td bordered">left menu</div>
							<div class="content td bordered">

								<div class="table">
									<div class="tr">
										<div class="content-header td">header</div>
									</div>
									<div class="tr">
										<div class="content-body td">
											<div class="list">
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>
													<div>dsfsdfsffsd</div>

											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>

				</div>

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


...
Рейтинг: 0 / 0
28.08.2014, 10:50
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731347
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Правильнее будет сказать "это не будет работать нигде, кроме webkit".
Высота элементов таблицы во всех прочих движках всегда формируются по контенту (то есть, если в таблице вы где-то пишете height: 100% -- это всегда означает "100% от высоты контента"), и способа заставить её вычисляться по контейнеру -- не существует (кроме, разумеется, скриптов и ручного вычисления нужной height).

И да, это соответствует спецификациям W3C. Так что правильнее сказать, что это вебкит ведет себя неправильно.
...
Рейтинг: 0 / 0
28.08.2014, 11:31
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731353
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
UPD: Слегка наврал. Спецификация этот момент не закрепляет, а потому он и сделан по-разному. В webkit одним способом, в gecko другим. Оба способа спецификациям не противоречат.
...
Рейтинг: 0 / 0
28.08.2014, 11:35
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731356
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
The_ShadoW,

Считаю что вы не правы - изменил стиль класса .list и заработало в FF
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
.list {
	position:absolute;
	left: 0;
	top:0;
	bottom:0;
	right:0;
	overflow: auto;
}



Остался один ослик...
...
Рейтинг: 0 / 0
28.08.2014, 11:37
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731374
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
О да, с position:absolute-то естественно заработает
Правда, абсолютное позиционирование добавляет много разной красоты к последующей верстке внутри этого блока, но это мелочи, возможно, у вас всё достаточно просто, и это не привнесет никаких проблем.
...
Рейтинг: 0 / 0
28.08.2014, 11:47
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731515
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
The_ShadoW,

а какие проблемы с версткой потом внутри абсолютнопозиционированного блока?
костыли в виде скриптов для поддержки высоты тоже не выход потому что контент генерируется динамически приложением и все эти распорки могут вызвать конфликты - хотелось бы все это решить версткой

остался один IE - во всех браузерах вроде все работает корректно
...
Рейтинг: 0 / 0
28.08.2014, 13:08
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731801
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
spкостыли в виде скриптов для поддержки высоты тоже не выход потому что контент генерируется динамически приложением и все эти распорки могут вызвать конфликты - хотелось бы все это решить версткой
Я, честно говоря, никогда не понимал причин лютого страха перед выставлением размеров скриптами. Ну да, могут попасться люди, у которых JS отключён. Но кто нынче верстает страницы под таких?

Насчёт вашего "не выход", я, честно говоря, вообще не понял, где вы видите проблему. Контент генерируется? Пусть генерируется. Вам надо выставлять размеры "по экрану", а не по контенту, поэтому вопросы о том, как именно там что-то внутри генерируется -- абсолютно не имеют значения.
...
Рейтинг: 0 / 0
28.08.2014, 15:47
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731815
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
The_ShadoW,

я не боюсь скриптов - у меня все приложение на Backbone.js))
Просто у меня таких контейнеров может быть несколько на странице
...
Рейтинг: 0 / 0
28.08.2014, 15:53
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731830
The_ShadoW
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
The_ShadoW
Участник
Собственно, я к чему заговорил про скрипты-то. Я не так давно делал как раз подобную таблицу, где в ячейках мне нужны были блоки с некими (min- max-) лимитами на размер, а дальше чтоб скроллировались.
После пары недель ковыряний я плюнул, и стал считать все размеры скриптами -- альтернативой был только position:absolute, и идея лепить в каждую ячейку абсолютно позиционированный блок мне совсем не нравилась (да и один фиг в ИЕ не пашет). Кроссбраузерная табличная вёрстка до сих пор имеет много страшных моментов, и браться за неё, на мой взгляд, можно только от безысходности.

ЗЫ: Но если в тему кто-нибудь придёт, и расскажет pure CSS способ -- это будет прекрасно, конечно.
...
Рейтинг: 0 / 0
28.08.2014, 15:57
| Ответить | Цитировать | Написать  
css: не скроллируется контент внутри td в FF и IE.
    #38731863
sp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
sp
Участник
The_ShadoW,

я пытался решить этот же вопрос не "табличным" методом - сказали невозможно - только скрипты
"таблицами" работает везде кроме ИЕ
...
Рейтинг: 0 / 0
28.08.2014, 16:07
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css: не скроллируется контент внутри td в FF и IE.
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=92&tid=1446767]:
 0ms
get settings:
 7ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 47ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 26ms
get tp. blocked users:
 1ms
others: 234ms
total:  339ms
созд. / загр.: 339ms
x
x
Закрыть


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