Вертикальный минимальный размер блока в процентах / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вертикальный минимальный размер блока в процентах

18 сообщений из 18, страница 1 из 1

Вертикальный минимальный размер блока в процентах

#37959304

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, 17:23:09

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959380

janco

Гость

Точно так же. height:...
Но это только изменит размеры, если информации мало, то как она будет на целый экран? Никак, разве что большим шрифтом. Или Вы хотите отцентрировать её по вертикали? Тогда попробуйте:

Код: css

1.
2.

height:83%;
padding: auto 0;

...

Рейтинг:

0 / 0

16.09.2012, 19:17:00

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959473

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, 21:48:07

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959512

janco

Гость

Попробуйте через выражения в пикселях , но не знаю как это поддерживают браузеры...
Или лучше прямо через JavaScript взять данные высоты окна, и прописать её (чуть меньше) высоте #main.

...

Рейтинг:

0 / 0

16.09.2012, 22:50:00

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959750

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

vdpКогда делал на таблицах - то просто у TR делал style="height:83%". А как тут?
Как вариант

Код: css

min-height: 83%;

...

Рейтинг:

0 / 0

17.09.2012, 08:49:40

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959828

vdp

Гость

krvsavdpКогда делал на таблицах - то просто у TR делал style="height:83%". А как тут?
Как вариант

Код: css

min-height: 83%;

Ну вот у меня это не работает на на Chrome, ни на IE 9.
Может что то еще нужно добавить? В процентах ни min-height ни height не работает

...

Рейтинг:

0 / 0

17.09.2012, 10:20:47

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959834

vdp

Гость

jancoПопробуйте через выражения в пикселях , но не знаю как это поддерживают браузеры...
Или лучше прямо через JavaScript взять данные высоты окна, и прописать её (чуть меньше) высоте #main.

Насколько понял expression уже не поддерживается от IE8.
На Javascript пробовал, но там появилась тоже проблема: как узнать высоту необходимую DIV'у для отображения контента. То есть нет проблем установить высоту его на высотку экрана, а если требуется больше (потому что много контента) - то уже не получается, потому что не знаю на сколько нужно устанавливать, сколько требуется.

...

Рейтинг:

0 / 0

17.09.2012, 10:23:44

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37959836

vdp

Гость

Не пойму, может вообще это не решабельно.

...

Рейтинг:

0 / 0

17.09.2012, 10:24:16

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37960024

st_st

Участник

Откуда: Tasm 5.0

Сообщения: 2 360

Рейтинг: 0 / 0

А зачем это нужно? Есть же обычные темплейты - общий див с height 100%, в нём внутри хедер. Футер отдельно снизу под общим дивом с margin-top:-высота_футера.

...

Рейтинг:

0 / 0

17.09.2012, 11:59:11

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37960051

vdp

Гость

Зачем это нужно?

Стороны наполняются информацией динамически. Например, список пользователей. При старте пользователь один, а потом разрастается и их может быть тысяча. Когда пользователь 1 - то div #main по высоте очень маленький. Хотелось бы, чтобы минимальная высота какая то была, но в то же время когда записей много - то DIV бы растягивался.

...

Рейтинг:

0 / 0

17.09.2012, 12:08:07

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37960138

st_st

Участник

Откуда: Tasm 5.0

Сообщения: 2 360

Рейтинг: 0 / 0

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

17.09.2012, 12:49:04

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961425

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

vdpкак сделать так, что бы DIV main по высоте был не меньше чем на 90% экрана
Он у тебя внутри wrap . Т.о. все его размеры в потоке ведутся от этого элемента.

...

Рейтинг:

0 / 0

18.09.2012, 00:57:53

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961428

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

vdpНе пойму, может вообще это не решабельно.
Так ты и не рассказал что хочешь получить в итоге...

...

Рейтинг:

0 / 0

18.09.2012, 00:58:46

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961433

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

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, 01:05:28

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961610

vdp

Гость

krvsa vdp , оно?
[/src]

Вот! Спасибо огромное!
Именно так!

...

Рейтинг:

0 / 0

18.09.2012, 09:52:46

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961852

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

vdpИменно так!
А ты писал "не решаемо"...

Это набросок разумеется.
Т.к. там футер еще "защитить" нужно от контента в материнском блоке... При его увеличении, он будет "заползать" под футер.

...

Рейтинг:

0 / 0

18.09.2012, 11:41:58

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961858

vdp

Гость

Нет, все ок. Я уже попробовал! Не налезает.

...

Рейтинг:

0 / 0

18.09.2012, 11:44:46

| Ответить | Цитировать | Написать

Вертикальный минимальный размер блока в процентах

#37961865

vdp

Гость

Ну не решаемо было, пока не разрешилось :-) Еще раз спасиб.

...

Рейтинг:

0 / 0

18.09.2012, 11:46:19

| Ответить | Цитировать | Написать

18 сообщений из 18, страница 1 из 1

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=37959836&tid=1449333]:	0ms
get settings:	10ms
get forum list:	15ms
check forum access:	3ms
check topic access:	3ms
track hit:	186ms
get topic data:	8ms
get forum data:	3ms
get page messages:	51ms
get tp. blocked users:	1ms
others:	221ms

total:	501ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы