Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css: не скроллируется контент внутри td в FF и IE. / 10 сообщений из 10, страница 1 из 1
28.08.2014, 10:50
    #38731276
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
Добрый день!
наверняка кто-то на эти грабли уже наступал и знает ответ - я не верстальщик, поэтому не знаю и прошу помощи.
Контент в ячейках 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, 11:31
    #38731347
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
Правильнее будет сказать "это не будет работать нигде, кроме webkit".
Высота элементов таблицы во всех прочих движках всегда формируются по контенту (то есть, если в таблице вы где-то пишете height: 100% -- это всегда означает "100% от высоты контента"), и способа заставить её вычисляться по контейнеру -- не существует (кроме, разумеется, скриптов и ручного вычисления нужной height).

И да, это соответствует спецификациям W3C. Так что правильнее сказать, что это вебкит ведет себя неправильно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.08.2014, 11:35
    #38731353
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
UPD: Слегка наврал. Спецификация этот момент не закрепляет, а потому он и сделан по-разному. В webkit одним способом, в gecko другим. Оба способа спецификациям не противоречат.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.08.2014, 11:37
    #38731356
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
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:47
    #38731374
The_ShadoW
The_ShadoW
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
О да, с position:absolute-то естественно заработает
Правда, абсолютное позиционирование добавляет много разной красоты к последующей верстке внутри этого блока, но это мелочи, возможно, у вас всё достаточно просто, и это не привнесет никаких проблем.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.08.2014, 13:08
    #38731515
sp
sp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css: не скроллируется контент внутри td в FF и IE.
The_ShadoW,

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

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

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

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

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

я пытался решить этот же вопрос не "табличным" методом - сказали невозможно - только скрипты
"таблицами" работает везде кроме ИЕ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css: не скроллируется контент внутри td в FF и IE. / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 386ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1446767]:
 0ms
get settings:
 5ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 137ms
get topic data:
 5ms
get forum data:
 2ms
get page messages:
 23ms
get tp. blocked users:
 1ms
others: 199ms
total:  386ms
x
x
Закрыть


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