Scroll внутри <td>
Привет!
Столкнулся с проблемой, задача: разбить страницу на 2 части, верхней из которых задана конкретная высота в пикселях, нижняя же должна занять остальную часть страницы, более того, если в нижней контента больше, нежели она может вместить, то у неё должен появиться скролл (а не у самой страницы).
Ниже привожу то, как пробовал решить сам, но работает это только в Google Chrome и нигде более (в других браузерах td тянется вслед за контентом и скролл получается не у td, а у всей страницы) :cray:
Надеюсь, выручите меня в очередной раз каким-нибудь решением, спасибо заранее. :victory:
PS Как выяснилось, прямо тут не получается запустить и посмотреть именно то, что я имел ввиду, поэтому лучше на локалхосте смотреть.
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body {
height: 100%;
padding: 0;
margin: 0;
}
table {
height: 100%;
width: 100%;
}
.tdFixed {
height: 225px;
background: #faa;
}
.tdScroll {
background: #aaf;
}
.wrap {
height: 100%;
width: 100%;
overflow: auto;
}
.fakeContent {
height: 2500px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="tdFixed"></td>
</tr>
<tr>
<td class="tdScroll">
<div class="wrap">
<div class="fakeContent">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
|