Здравствуйте.
Не могу побороть разметку в html5. Есть таблица. В ячейку вложен div который должен отображать много текста и занимать всю высоту ячейки (у div height:100%). Размер таблицы по высоте 100% (не должна вылазить за экран). В элементе div должна отображаться прокрутка (overflow:auto). Вроде бы всё просто... Но scroll в div элементе не отображается. Причём не отображается если ставлю
. Если в то же примере ставлю
1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
то всё работает именно так как надо. Прилагаю файлик с примером для html5 и html4 (в примере нужно поменять только DOCTYPE ).
Вот код для общей картины :
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--<!DOCTYPE html>-->
<html>
<head>
<title>html test</title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
table
{
border-width: 1px;
border-style: outset;
border-color: gray;
margin: 0 auto;
width: 100%;
height: 100%;
}
td
{
border-width: 1px;
border-style: inset;
border-color: gray;
}
</style>
</head>
<body>
<table>
<tr style="height: 15%">
<td >
верхний
</td>
</tr>
<tr style="height: 75%">
<td>
<div style="width: 100%; height: 100%; overflow: auto;">
куча текста куча текста куча текста куча текста куча текста куча текста куча текста куча
....
текста куча текста куча текста куча текста куча текста куча текста куча текста куча текста
</div>
</td>
</tr>
<tr style="height: 10%">
<td >
низ
</td>
</tr>
</table>
</body>
</html>
Мне нужно добиться от разметки в html5 такого же точно поведения как в html4. Т.е. что бы в div появлялся scroll и таблица не вылазила за экран. Это удаётся сделать в html5 только устанавливая в div например height:600px. Но такое решение не подходит. Подскажите пожалуйста как это сделать.
