Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Scroll в div / 10 сообщений из 10, страница 1 из 1
21.10.2015, 18:37
    #39082793
-=Koba=-
-=Koba=-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
Допустим есть следующая структура

Код: html
1.
2.
3.
4.
5.
<div id="top " width="100%" height="100%">
   <div id="header"/>
   <div id="main/>
   <div id="bottom">
</div>



Div top леежит внутри некой ячейки таблицы
Как сделать, чтоб header оставаля в верху, bottom спустился в низ к граница этой самой ячейки (или экрана), а main занял все оставшееся место.

Только надо height нигде небыло константой
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.10.2015, 18:43
    #39082796
-=Koba=-
-=Koba=-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
Забыл добавить у header & bottom height=30px
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.10.2015, 09:22
    #39083047
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
-=Koba=- , если ячейка той таблицы резиновая - фик ты чего растянешь...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.10.2015, 10:59
    #39083182
kunaksergey
kunaksergey
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
Код: 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.
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
table {
    border-collapse: collapse; 
    height: 200px;
    width: 200px;
   }

td{
    border: 1px solid black;
    padding: 0px;
    vertical-align: baseline;
    width:100%;
   }
#top{
	height: 100%;
  	position:relative;
	padding-bottom:30px;
}   
#header,#main,#bottom{
		width: 100%;
}

#header{
	height: 30px;
	background-color: red;
}
#main{
	background-color: yellow;
 	height: 100%;
}
#bottom{
	height: 30px;
	background-color: green;
	position:absolute;
	bottom:0;
}	
</style>

</head>
<body>
<table>
	<tr>
		<td >
			<div id="top">
			   <div id="header">header</div>
			   <div id="main">main</div>
			   <div id="bottom">bottom</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.10.2015, 11:36
    #39083229
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
kunaksergey , кагбэ не факт...

Код: 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.
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
table {
    border-collapse: collapse; 
    height: 200px;
    width: 200px;
   }

td{
    border: 1px solid black;
    padding: 0px;
    vertical-align: baseline;
    width:100%;
   }
#top{
	height: 100%;
  	position:relative;
	padding-bottom:30px;
}   
#header,#main,#bottom{
		width: 100%;
}

#header{
	height: 30px;
	background-color: red;
}
#main{
	background-color: yellow;
 	height: 100%;
}
#bottom{
	height: 30px;
	background-color: green;
	position:absolute;
	bottom:0;
}	
</style>

</head>
<body>
<table>
	<tr>
		<td>
			<div id="top">
			   <div id="header">header</div>
			   <div id="main">main</div>
			   <div id="bottom">bottom</div>
			</div>
		</td>
		<td>
			<p>
				Служба Яндекс.Рефераты предназначена для студентов и школьников, 
				дизайнеров и журналистов, создателей научных заявок и отчетов — 
				для всех, кто относится к тексту, как к количеству знаков.
			</p>
			<p>
				Нажав на кнопку «Написать реферат», вы лично создаете уникальный 
				текст, причем именно от вашего нажатия на кнопку зависит, какой 
				именно текст получится — таким образом, авторские права на реферат 
				принадлежат только вам.
			</p>
			<p>
				Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
				Яндекс.Рефератов неповторим.
			</p>
			<p>
				Текстами рефератов можно пользоваться совершенно бесплатно, однако 
				при транслировании и предоставлении текстов в массовое пользование 
				ссылка на Яндекс.Рефераты обязательна.
			</p>
		</td>
	</tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.10.2015, 11:37
    #39083233
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
kunaksergey , в ФФ вообще фигня...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.10.2015, 11:38
    #39083234
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
ИЕ9 такая же фигня...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.02.2016, 17:09
    #39167825
-=Koba=-
-=Koba=-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
А может скрипт есть какой?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.02.2016, 17:20
    #39167841
-=Koba=-
-=Koba=-
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
У <div id="main/> может быть скролл
Если элементы не влазят
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.02.2016, 14:06
    #39168583
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Scroll в div
-=Koba=-А может скрипт есть какой?
Типа волшебный и на просторах инета?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Scroll в div / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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