| |
 1002.5 Кб |
|
| | Необходимо сделать что-то наподобии того, что в прикрепленном файле. Сначала думал верхний блок сделать fixed, но решил, что лучше будет оставить их в покое, а нижний просто растягивать как-то до низа окна и ставить ему owerflow-y: scroll.
Оказалось, что все не так просто, как я думал.
function getClientHeight(){
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
|
и
<body onload="document.getElementById('main').style.height = (getClientHeight() - document.getElementById('header').style.height) + 'px'">
|
Вот всё, на чем я сейчас застрял. Какая-то высота присваивается этому блоку с id="main", но неправильная, видимо, раз он уезжает ниже нижней границы окна. А иногда и вообще разная высота присваивается. | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 12:56)
| | | Из рисунка непонятны условия (кроме одного - оба блока должны иметь одну ширину и находиться горизонтально по центру страницы).
Опишите точнее оба блока (их размеры и положение), используя понятия:
-- фиксированная ширина/высота в пикселах
-- относительная ширина/высота в процентах
-- свободная высота/ширина (зависящая от внутреннего содержимого)
-- позиционирование слева(сверху)/справа(снизу)/по центру по горизонтали или по вертикали
Итак:
ВЕРХНИЙ блок:
ширина -- ??
высота -- ??
позиционирование -- ??
НИЖНИЙ блок:
ширина -- ??
высота -- ??
позиционирование -- ??
Дополнительные условия:
-- суммарная высота обоих блоков - ??
-- позиционирование обоих блоков (вместе) по вертикали -- ?
... | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 13:19)
| | | >оба блока должны иметь одну ширину и находиться горизонтально по центру страницы
оба блока, заключенные в body и составляют всю страницу
Итак:
ВЕРХНИЙ блок:
ширина -- 100%
высота -- свободная
позиционирование -- слева
НИЖНИЙ блок:
ширина -- 100%
высота -- свободная
позиционирование -- слева
Дополнительные условия:
-- суммарная высота обоих блоков - свободная
-- позиционирование обоих блоков (вместе) по вертикали -- верх | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 13:32)
| | | Перечитайте написанное вами:
"оба блока, заключенные в body и составляют всю страницу"
"суммарная высота обоих блоков - свободная"
при этом:
"ВЕРХНИЙ блок: высота -- свободная"
"НИЖНИЙ блок: высота -- свободная"
Противоречия не находите? :-)
Если оба блока составляют всю страницу, значит "суммарная высота обоих блоков" должна быть не "свободной", а быть равной высоте страницы, так?
И, следовательно, какой-либо из блоков (нижний, вероятнее всего) должен принудительно растягиваться по высоте, так? Так почему же у него, по-вашему, высота - "свободная" (т.е. определяется внутренним содержимым)
В общем, попробуйте сформулировать описание ТОЧНЕЕ.
Я не придираюсь, я реально могу и хочу помочь вам, только вот додумывать за вас не желаю.
Ибо по-любому я чего-нить "додумаю" не так, как вам это хочется. :-) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 13:50)
| | | Немножко, все же, придираетесь. Или же не читали оп-пост, ибо там написано, что второй блок как раз-таки растягиваться должен до нижнего края. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 13:50)
| | | Ладно, заново сформулирую вопрос: есть начальная схема, как мне второй блок растянуть до низа и задать ему некую высоту, чтобы контент в нём прокручивался? | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 14:02)
| | |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
html, body {height: 100%; overflow: hidden; margin: 0}
</style>
</head>
<body onload="with (document) {getElementById ('dn').style.height = (body.clientHeight - getElementById ('dn').offsetHeight) + 'px'; getElementById ('test').style.height = '5000px'}">
<div id="up" style="background: lime">Высота свободная,<br>определяется внутренним содержанием</div>
<div id="dn" style="overflow: auto; background: silver">Растягиваем по высоте до края окна<br>
<div id="test" style="background: aqua">А это для проверки работы скролла растянем на пять тысяч пикселей</div></div>
</body>
</html>
|
Использовать ТЕГ.style.height в правой части можно в одном-единственном случае - если непосредcтвенно в теге указано style="ЧТО-ТОpx" | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 14:12)
| | | getElementById ('test').style.height = '5000px'
это что? | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 14:40)
| | | Невнимательны вы.
Цитирую себя же:
<div id="test" style="background: aqua">А это для проверки работы скролла растянем на пять тысяч пикселей</div>
|
Проверили? Убедились в работоспособности?
Убирайте теперь и сам тестовый <DIV>, и упоминание о нём в скрипте. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 14:50)
| | | Таки не работает :<
Бегунок вообще не появляется, блок уходит вниз до конца контента. | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 14:59)
| | | Таки работает.
И здесь не найдётся ни одного человека, в чьём браузере это бы не работало.
Так что...
Птицу "петух" знаете?
Вот его берите и е...те ему мозг, ладно? | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 15:11)
| | | В моём примере это не работает. Хотя структура сохранена ПОЛНОСТЬЮ. Да, Ваш пример у меня работает. | |
| |
|
|
| |
|
|
| |
для: alexander95
(26.07.2012 в 15:13)
| | | >"В моём примере это не работает. Хотя структура сохранена ПОЛНОСТЬЮ. Да, Ваш пример у меня работает."
Вывод: у кого-то кривые руки. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(26.07.2012 в 15:16)
| | | Вы совсем не учли тот случй, когда содержимое блока будет куда больше body.clientHeight.
Вот рабочий вариант:
<body onload="with (document) {getElementById ('main').style.height = (getClientHeight() - getElementById ('header').clientHeight) + 'px';};">
|
| |
| |
|
|
| |
|
|
| |
для: alexander95
(02.08.2012 в 12:37)
| | | Это - НЕрабочий вариант:
-- функция getClientHeight () не определена
-- использовать свойство clientHeight для объекта document.getElementById ('header') - глупо.А если у него паддинги по вертикали по 20 пикселей и бордеры? Из расчёта "потеряются" более 40 пикселей. К этому стремитесь? :)
Кроме того, ваша фраза "содержимое блока будет куда больше body.clientHeight" свидетельствует о том, что вы вовсе не понимаете сути своей же задачи.
document.body.clientHeight - это высота открытого окна браузера (минус скроллы окна, минус бордеры окна же и минус верикальные паддинги).
По исходному заданию блок надо растянуть вниз до края окна.
Мой код его растягивает.
Ваш - совершенно не понимаю, что делает. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(02.08.2012 в 19:06)
| | | >-- функция getClientHeight () не определена
определена, я показывал Вам её раньше, не убирал из кода.
>-- использовать свойство clientHeight для объекта document.getElementById ('header') - глупо.А если у него паддинги по вертикали по 20 пикселей и бордеры? Из расчёта "потеряются" более 40 пикселей. К этому стремитесь? :)
В том-то и дело, что паддинги не учитывались и при паддинге в 1% блок перелезал через низ ровно на 2%.
>вы вовсе не понимаете сути своей же задачи.
буду крайне признателен, если объясните мне суть моей же задачи. | |
| |
|
|
