Показать сообщение отдельно
  #1 (permalink)  
Старый 08.08.2012, 00:38
Аспирант
Отправить личное сообщение для madd1 Посмотреть профиль Найти все сообщения от madd1
 
Регистрация: 26.07.2012
Сообщений: 35

Scroll внутри <td>
Привет!

Столкнулся с проблемой, задача: разбить страницу на 2 части, верхней из которых задана конкретная высота в пикселях, нижняя же должна занять остальную часть страницы, более того, если в нижней контента больше, нежели она может вместить, то у неё должен появиться скролл (а не у самой страницы).

Ниже привожу то, как пробовал решить сам, но работает это только в Google Chrome и нигде более (в других браузерах td тянется вслед за контентом и скролл получается не у td, а у всей страницы)

Надеюсь, выручите меня в очередной раз каким-нибудь решением, спасибо заранее.

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>

Последний раз редактировалось madd1, 08.08.2012 в 00:57.
Ответить с цитированием