Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2012, 00:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от madd1
Как выяснилось, прямо тут не получается запустить и посмотреть именно то, что я имел ввиду, поэтому лучше на локалхосте смотреть.
Нун height - cтавить
[HTML run height=800][/HTML]

<!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 {
        table-layout:fixed;
	height: 100%;
	width: 100%;
}
.tdFixed {
	height: 225px;
	background: #faa;
}
.tdScroll {
	background: #aaf;
        height:600px;
}
.wrap {
	height: 100%;
	width: 100%;
	overflow: auto;
}
.fakeContent {
	height: 2500px;
        width:23px;
}
</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>

Последний раз редактировалось Deff, 08.08.2012 в 01:05.
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2012, 00:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от madd1
нижняя же должна занять остальную часть страницы, более того, если в нижней контента больше, нежели она может вместить, то у неё должен появиться скролл (а не у самой страницы).
Поставьте в данную ячейку div co скроллом и width и height 100%

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

Сообщение от Deff Посмотреть сообщение
Поставьте в данную ячейку div co скроллом и width и height 100%

у ячейки должен быть задан размер
А если нужно, чтобы ячейка растянулась по оставшейся странице, страница то у всех разная, тут не выйдет задать размер
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2012, 01:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от madd1
тут не выйдет задать размер
Скриптом мон вычислить и поправить
2. потестите Выложенное - во фрейме ведет себя иначе
Ответить с цитированием
  #6 (permalink)  
Старый 08.08.2012, 12:08
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от madd1
Ниже привожу то, как пробовал решить сам, но работает это только в Google Chrome и нигде более (в других браузерах td тянется вслед за контентом и скролл получается не у td, а у всей страницы)
Знакомая ситуация, и как я понял средствами CSS её не решить, у таблицы такая структура, итого: выигрываешь в одном, проигрываешь в другом, адекватный - да, только хром
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Центровка текста внутри Alert Le-mark43 Events/DOM/Window 4 18.05.2012 15:03
Не работает код внутри циклов DZHETIGAPA Events/DOM/Window 1 21.06.2011 01:03
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01
Область видимости внутри функции YISHIMITSY Общие вопросы Javascript 1 25.08.2010 06:50
Подсветка HTML внутри TEXTAREA inetusr Общие вопросы Javascript 2 24.02.2009 17:22