Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вертикальный минимальный размер блока в процентах / 18 сообщений из 18, страница 1 из 1
16.09.2012, 17:23:09
    #37959304
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Привет.

Кто нить может подсказать - как сделать так, что бы DIV main по высоте был не меньше чем на 90% экрана. То есть если в нем мало информации - то все бы помещалось на экране (без прокрутки) и чтобы занимало почти весь экран (то есть чтобы в этом случае DIV растягивался), а если информацию в нем много, то естесното высота будет такая что необходима прокрутка. Когда делал на таблицах - то просто у TR делал style="height:83%". А как тут?

Заранее благодарен.
Код: 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
	<style type="text/css">
	body,
	html {
		color:#000;
		width: 100%;
		height: 100%;
	}
	#wrap {
		background:#99c;
		margin:0 auto;
		width:900px;
	}
	#header {
		background:#ddd;
	}
	#main {
		background:green;
		float:left;
		width:900px;
	}
	#footer {
		background:#cc9;
		clear:both;
	}
	</style>
</head>
<body>

<div id="wrap">
	<div id="header">xxxxxx</div>
	<div id="main">
		<h2>XXXX</h2>
		<p>aaaa bbb cccc</p>
		<h3>YYYYY</h3>
		<p>aaaa bbb  ccccc</p>
	</div>
	<div id="footer">yyyyyyy</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2012, 19:17:00
    #37959380
janco
janco
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Точно так же. height:...
Но это только изменит размеры, если информации мало, то как она будет на целый экран? Никак, разве что большим шрифтом. Или Вы хотите отцентрировать её по вертикали? Тогда попробуйте:
Код: css
1.
2.
height:83%;
padding: auto 0;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2012, 21:48:07
    #37959473
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Ну вот вопрос как сделать так, чтобы минимальный размер этого DIVa был на "почти" весь экран?

Если я в #main добавлю
Код: html
1.
2.
		height:83%;
		padding: auto 0;



То ничего не меняется.
Если

Код: html
1.
2.
		height:700px;
		padding: auto 0;



То меняется, но мне нужно в процентах, так как я не знаю высоту окна IE, Chrome i т.д.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2012, 22:50:00
    #37959512
janco
janco
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Попробуйте через выражения в пикселях , но не знаю как это поддерживают браузеры...
Или лучше прямо через JavaScript взять данные высоты окна, и прописать её (чуть меньше) высоте #main.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 08:49:40
    #37959750
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdpКогда делал на таблицах - то просто у TR делал style="height:83%". А как тут?
Как вариант

Код: css
1.
min-height: 83%;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 10:20:47
    #37959828
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
krvsavdpКогда делал на таблицах - то просто у TR делал style="height:83%". А как тут?
Как вариант

Код: css
1.
min-height: 83%;



Ну вот у меня это не работает на на Chrome, ни на IE 9.
Может что то еще нужно добавить? В процентах ни min-height ни height не работает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 10:23:44
    #37959834
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
jancoПопробуйте через выражения в пикселях , но не знаю как это поддерживают браузеры...
Или лучше прямо через JavaScript взять данные высоты окна, и прописать её (чуть меньше) высоте #main.

Насколько понял expression уже не поддерживается от IE8.
На Javascript пробовал, но там появилась тоже проблема: как узнать высоту необходимую DIV'у для отображения контента. То есть нет проблем установить высоту его на высотку экрана, а если требуется больше (потому что много контента) - то уже не получается, потому что не знаю на сколько нужно устанавливать, сколько требуется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 10:24:16
    #37959836
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Не пойму, может вообще это не решабельно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 11:59:11
    #37960024
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
А зачем это нужно? Есть же обычные темплейты - общий див с height 100%, в нём внутри хедер. Футер отдельно снизу под общим дивом с margin-top:-высота_футера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 12:08:07
    #37960051
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Зачем это нужно?

Стороны наполняются информацией динамически. Например, список пользователей. При старте пользователь один, а потом разрастается и их может быть тысяча. Когда пользователь 1 - то div #main по высоте очень маленький. Хотелось бы, чтобы минимальная высота какая то была, но в то же время когда записей много - то DIV бы растягивался.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2012, 12:49:04
    #37960138
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdpЗачем это нужно?

Стороны наполняются информацией динамически. Например, список пользователей. При старте пользователь один, а потом разрастается и их может быть тысяча. Когда пользователь 1 - то div #main по высоте очень маленький. Хотелось бы, чтобы минимальная высота какая то была, но в то же время когда записей много - то 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.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<style type="text/css">
	html,body {
		height:100%;
	}
	.wrapper {
		min-height:100%;
	}
	body {
		margin:0;
		position:relative;
	}
	.wrapper {
		background:blue;
	}
	.header {
		height:150px;
		background:red;
	}
	.footer {
		height:200px;
		margin-top:-200px;
		background:yellow;
	}
/*
	.content {
		height:1500px;
	}
*/
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="header">Хедер</div>
		<div class='content'>Тут всякая шняжка</div>
	</div>
	<div class="footer">Футер</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 00:57:53
    #37961425
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdpкак сделать так, что бы DIV main по высоте был не меньше чем на 90% экрана
Он у тебя внутри wrap . Т.о. все его размеры в потоке ведутся от этого элемента.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 00:58:46
    #37961428
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdpНе пойму, может вообще это не решабельно.
Так ты и не рассказал что хочешь получить в итоге...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 01:05:28
    #37961433
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdp , оно?

Код: 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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body,
html {
	width: 100%;
	height: 100%;
}
#main {
	position: relative;
	width: 900px;
	min-height: 90%;
	margin:0 auto;
	background: green;
}
#header {
	background:#ddd;
}
#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background:#cc9;
	clear:both;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="main">
	<div id="header">xxxxxx</div>
	<h2>XXXX</h2>
	<p>aaaa bbb cccc</p>
	<h3>YYYYY</h3>
	<p>aaaa bbb  ccccc</p>
	<div id="footer">yyyyyyy</div>
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 09:52:46
    #37961610
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
krvsa vdp , оно?
[/src]

Вот! Спасибо огромное!
Именно так!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 11:41:58
    #37961852
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
vdpИменно так!
А ты писал "не решаемо"...

Это набросок разумеется.
Т.к. там футер еще "защитить" нужно от контента в материнском блоке... При его увеличении, он будет "заползать" под футер.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 11:44:46
    #37961858
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Нет, все ок. Я уже попробовал! Не налезает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.09.2012, 11:46:19
    #37961865
vdp
vdp
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Вертикальный минимальный размер блока в процентах
Ну не решаемо было, пока не разрешилось :-) Еще раз спасиб.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вертикальный минимальный размер блока в процентах / 18 сообщений из 18, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 529ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449333]:
 0ms
get settings:
 9ms
get forum list:
 16ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 203ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 223ms
total:  529ms
x
x
Закрыть


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