Как можно сделать "резинку" с применением % и px

puller12 · January 18, 2011

Здравствуйте.

Подскажите пожалуйчта, как можно сделать "резинку" с применением % и px, а именно:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		html, body{
			margin:0px;
			background-color:#CF0;
			height:100%;
			width:100%;
		}
		.body{
	margin:0 auto;
	background-color:#CC3;
	height:100%;
	width:600px;
		}
		.top{
	margin:0 auto;
	background-color:#C96;
	height:100px;
	width:550px;
		}
		.content{
	margin:0 auto;
	background-color:#C69;
	height:100%;
	width:550px;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">top</div>
		<div class="content">content</div>
	</div>
</body>
</html>

задача 1: проблема в том, что див "content" внизу выскакивает за див "body", как это можно исправить?

(возможно ли высоту вводить с помощью переменных(функции))

задача 2: высота див "top" может меняться (в зависимости от наполнения)

rus · January 18, 2011

1) у див body поставить overflow:hidden;

2) у дива top либо не ставить высоту, либо поставить auto.

puller12 · January 18, 2011

1) у див body поставить overflow:hidden;

все вроде и так, но только: overflow:hidden обрежет заодно и наполнение дива "контент", а оно должно быть

(в диве контента будет стоять overflow:auto что и будет прокручивать наполнение)

rus · January 18, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		html, body{
			margin:0px;
			background-color:#CF0;
			height:100%;
			width:100%;
		}
		.body{
	margin:0 auto;
	background-color:#CC3;
	width:600px;
	overflow:hidden;
		}
		.top{
	margin:0 auto;
	background-color:#C96;
	height:auto;
	width:550px;
		}
		.content{
	margin:0 auto;
	background-color:#C69;
	height:auto;
	width:550px;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
		</div>
	</div>
</body>
</html>

а если немного пошевелить мозгами?

puller12 · January 18, 2011

все хорошо но это уже не "резинка" по вертикали, а для этого <div class="body"> - height:100%;-константа

может я неправильно сформулировал вопрос:

должно получиться, что то вроде этого

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		html, body{
			margin:0px;
			background-color:#CF0;
			height:100%;
			width:100%;
		}
		.body{
	margin:0 auto;
	background-color:#CC3;
	height:100%;
	width:600px;
		}
		.top{
	margin:0 auto;
	background-color:#C96;
	height:100px;
	width:550px;
		}
		.content{
	margin:0 auto;
	background-color:#C69;
	height: 100%;
	width:500px;
	overflow:auto;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">top</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
		</div>
	</div>
</body>
</html>

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

если ему дать авто высоту он не реагирует на overflow:auto;

Edited January 18, 2011 by puller12

psywalker · January 18, 2011

А я не понял, что ты хочешь получить. Покажи скрины.

rus · January 18, 2011

все хорошо но это уже не "резинка" по вертикали, а для этого <div class="body"> - height:100%;-константа
может я неправильно сформулировал вопрос:
должно получиться, что то вроде этого
но див контент не должен заныривать за все тело сайта, что и придаст ему резиновость.
если ему дать авто высоту он не реагирует на overflow:auto;

Действительно непонятно чего ты хочешь, ибо изначально вопрос звучал так:

задача 1: проблема в том, что див "content" внизу выскакивает за див "body", как это можно исправить?
(возможно ли высоту вводить с помощью переменных(функции))
задача 2: высота див "top" может меняться (в зависимости от наполнения)

я ответил, дальше пошли уже другие вопросы.

puller12 · January 18, 2011

rus - да ты ответил - СПАСИБО!!! :rolleyes: все правильно подрезало.

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

скрин:

_____________________________

это элемент вот такого шаблона:

rus · January 18, 2011

rus - да ты ответил - СПАСИБО!!! все правильно подрезало.
Но я уточнил - мне не нужен обрезанный контент , а если его не подрезать - то резинка уже теряется.

да где же он обрезанный то? тот пример что я привел - там просто полностью вся страница скроллится, а вообще вам надо почитать про родителей и их дочерних элементов, что эти элементы наследуют от родителей, то есть чтение в сторону наследования.

rus · January 18, 2011

все, я понял что ты имеешь ввиду, но из твоего примера вышло только так (и это самый грязный пример получился, ибо наскоряк):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		html {
			height:100%;
		}
		body{
			margin:0px;
			background-color:#CF0;
			width:100%;
		}
		.body{
	margin:0 auto;
	background-color:#CC3;
	width:600px;
	height:800px;
	overflow:hidden;
		}
		.top{
	margin:0 auto;
	background-color:#C96;
	height:auto;
	width:550px;
		}
		.content{
	margin:0 auto;
	background-color:#C69;
	height:50%;
	width:550px;
	overflow:auto;
		}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
		</div>
		<div class="content">
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
			<p>Lorem ipsum dolor sit amet и тра-та-та...</p>
		</div>
	</div>
</body>
</html>

puller12 · January 18, 2011

rus - я дико извиняюсь, но вот твой код в деле

к сожалению оно обрезает

но общий смысл ты правильно понял именно это мне инадо

вот в математическом плане я вижу высоту блока контента как функцию:

100%-x

где х - высота top измеряется в px

но как это описать в хтмл

psywalker · January 18, 2011

Ты имеешь ввиду, что обрезается нижний квадрат со скроллом? Обрезается внизу, так?

А должно быть как?

puller12 · January 18, 2011

а должно все влезть вместе со скролом и работать как резинка должен именно этот блок

psywalker · January 18, 2011

Т.е. смотри, верхний квадрат должен быть без скрола и в пк, а нижний со скролом и в %?

Сколько должен быть нижний див со скроллом?

Можно на ЖС подгонять высоту нижнего блока при заполнении нижнего.

А таблица не пойдёт кстати? А то есть идея.

А если текста будет ООчень много, то скролл у верхнего дива появляться должен или нет? И до какой высоты он может быть максимум?

puller12 · January 18, 2011

вот в математическом плане я вижу высоту блока <div class="content"> как функцию:

height:? (<div "content">) = height:100%(<div "body">) - height:auto(<div "top">)

но как это описать в хтмл

возможно это можно сделать с помощью какого нибудь скрипта?

общий блок (<div "body">) = height:100%. В нем два блока верхний (<div "top">) и нижний (<div "content">).

Верхний (<div "top">) высота: минимальная = 10пикс., обычная = авто, максимальная = 300пикс. (в нем будет модуль джумла для показа слайдов).

Нижний (<div "content">) высота: минимальная = 200пикс., обычная и максимальная = авто заполнение оставшейся высоты общего блока (<div "body">).

Нижний (<div "content">) блок должен иметь overflow:auto; для отображения вонтента.

________________________________________________________________________________

__

в принципе я не против таблицы мне важен результат, если можно это сделать с помощью таблицы то да, но лучше уж, начать дивами и ими же закончить

я конечно подозреваю как таблицей но будет ли оно все корректно отображаться во всех браузерах.

psywalker · January 18, 2011

Вот такой вариант как тебе?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		* { margin: 0; padding: 0;}
		body,html { height: 100%;}
		#wrap { margin: 0 auto; height: 100%; position: relative; width: 600px; background: red;}
		.top,.bottom {}
		#top { background: blue;}
		#bottom { background: green; overflow: auto;}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="top">
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />

		</div>
		<div id="bottom">
					<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
						<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
						<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
						<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
			<p>ksjfdksdj skdjfksdjfk ksdfjkjsf</p><br />
		</div>
	</div>
<script type="text/javascript">
	var bottom = document.getElementById('bottom');
	var top = document.getElementById('top');
	window.onresize = window.onload = function(){
			bottom.style.height = document.body.clientHeight-top.offsetHeight+'px';
	}


</script>
</body>
</html>

puller12 · January 18, 2011

а-я-я-й

Уррррррррррррра, поймал КОДа за кое что!!!!!!! СПАСИБО!!!!!!!

похоже то что нужно, сейчас попробую со скриптиком разобраться и вставить в основной шаблон, а где еще можно о скриптиках то почитать, что б голову никому не морочить.

psywalker · January 18, 2011

а-я-я-й
Уррррррррррррра, поймал КОДа за кое что!!!!!!! СПАСИБО!!!!!!!
похоже то что нужно, сейчас попробую со скриптиком разобраться и вставить в основной шаблон, а где еще можно о скриптиках то почитать, что б голову никому не морочить.

Да там скриптик ерундовый. Если перевести на русский язык, то примерно означает: При шевелении экрана и при загрузке страницы высчитывается высота верхнего блока и отнимается от высоты страницы. И остальное расстояние ставиться нижнему блоку

puller12 · January 19, 2011

чуть чуть поменял - вот что получилось http://fav-art.com/FAV.template/

еще раз СПАСИБО!!!

п.с.: может знаешь, как задать свои параметры отображения скрола или где об этом почитать

хочу сделать гдето так:

или это только с помощью флэша

Vlad · January 19, 2011

С помощью JS проще, чем на флэше, да и универсальнее будет. Поищите в Гугле по ключевому слову jScroll, встретите несколько интересных решений.

puller12 · January 22, 2011

psywalker

ты писал выше что можно как то таблицей то же сделать, а можешь подсказать как

а то я пытаюсь поменять скролл с помощью jscrollpane http://jscrollpane.kelvinluck.com/ и отдельно скролл настроить и высоту - получается

но вот вместе они почемуто конфликтуют между собой, бьюсь уже 2 дня :blush:

psywalker · January 22, 2011

psywalker
ты писал выше что можно как то таблицей то же сделать, а можешь подсказать как
а то я пытаюсь поменять скролл с помощью jscrollpane http://jscrollpane.kelvinluck.com/ и отдельно скролл настроить и высоту - получается
но вот вместе они почемуто конфликтуют между собой, бьюсь уже 2 дня

Нее, там тоже нужно будет ЖС писать. Так что ищи другой вариант скролла или как то исправляй этот.

А вообще дай ссылку на косячную страницу.

puller12 · January 22, 2011

вот ставлю фиксированую высоту 300 пикселей все норм

.scroll-pane {height:300px;}

http://fav-art.com/jScrollPane_2-300/

только height:100%, сразу лагает:

.scroll-pane {height:100%;}

http://fav-art.com/jScrollPane_2/

цсс:

html, body{
	margin:0px;
	padding:0px;
	background-color:#414141;
	height:100%;
	width:100%;
}
#wrap { margin: 0 auto; height: 100%; position: relative; width: 600px; background: #3CC;}

#top{
	margin:0 auto;
	padding:0px;
	background-color: #C90;
	width:400px;
	overflow: auto;
}
#bottom {
	margin:0 auto;
	padding:0px;
	background-color: #999;
	height:100%;
	width:500px;
}
.conteiner {
	margin:0 auto;
	padding:0px;
	background-color: #C99;
	height:100%;
	width:450px;
	overflow:auto;
}
.scroll-pane {
	margin:0 auto;
	padding:0px;
	background-color: #F93;
	height:300px;
	width:420px;
}

.inside {
	margin:0 auto;
	padding:0px;
	background-color: #F36;
	height:1000px;
	width:300px;
	overflow: auto;
};

все остальные коды цсс и ява скачаны с выше указанного сайта и не изменялись

==========================================

кстати нашел то что хотел сделать http://www.vladislav.ua/ только скролл бы поменять

Edited January 22, 2011 by puller12

psywalker · January 22, 2011

вот ставлю фиксированую высоту 300 пикселей все норм
.scroll-pane {height:300px;}
http://fav-art.com/jScrollPane_2-300/
только height:100%, сразу лагает:
.scroll-pane {height:100%;}
http://fav-art.com/jScrollPane_2/

А зачем ты ставишь 100%? Ты должен ставить столько, сколько нужно. Значит нужно тоже высчитывать, как я высоту высчитывал на ЖС

puller12 · January 22, 2011

я в просчитанный блок ложу блок с высотой 100% и он его заполняет в него вставляю блок со скролом .scroll-pane и тоже ставлю высоту 100%, по логике высота блока-скролбара должна его заполнить, а на деле почему то не учитывает высоты блока

значит где то в коде он проскакивает и игнорирует ее

в хтмле и цсс тыкал-мыкал уже его уже везде все равно как то неправильно он считает

надо в код явы лезть наверное, а я его вообще не понимаю

Sign In

Как можно сделать "резинку" с применением % и px

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information