Взять обычный браузер. Он устроен так, что занимает весь экран монитора, независимо от того длинная страница сайта или короткая. Если страница длинная, то появляется прокрутка и показывается та часть содержимого, которая умещается на экране. При этом меню браузера всегда находится вверху экрана.
Теперь к web`у.
Есть код.
Хоть так:
<div style="height:300px;"></div> // меню сайта
<div>
<iframe src="file.php"></iframe> // контент сайта
</div>
Хоть так:
<div style="height:300px;"></div> // меню сайта
<iframe src="file.php"></iframe> // контент сайта
Как мне добиться подобного эффекта, как устроена разметка браузера?
Чтобы меню всегда было на экране и ни при каких обстоятельствах не уезжало вверх.
Чтобы фрейм всегда был на весь экран, т.е. начинался сразу после меню, и доходил минимум до низа окна браузера.
Чтобы нажатие клавиши F11 не сбивало дизайн.
Поддержка мозилы, оперы, ie, chrome.
Помогите реализовать пожалуйста, а то я уже неделю мучаюсь, не могу никак такое создать. Где-то читал, что можно ставить js метки вверху и внизу экрана, потом считать расстояние между ними и исходя из него давать фрейму размер. Но я такого ни разу не делал и даже не видел.
Спустя 8 часов, 3 минуты, 56 секунд (2.01.2010 - 10:29) glock18 написал(а):
решение в одну строку:
position: fixed
но не работает в ie6 (может и 7)
иначе делаем все на js. ловим события resize, scroll окна, и позиционируем элементы так, как надо в зависимости от высоты, ширины окна и прокрученной области.
position: fixed
но не работает в ie6 (может и 7)
иначе делаем все на js. ловим события resize, scroll окна, и позиционируем элементы так, как надо в зависимости от высоты, ширины окна и прокрученной области.
Спустя 3 часа, 15 минут, 33 секунды (2.01.2010 - 13:44) sergeiss написал(а):
| Цитата (glock18 @ 2.01.2010 - 11:29) |
| ловим события resize, scroll окна, и позиционируем элементы так, как надо в зависимости от высоты, ширины окна и прокрученной области. |
Это решение мне лично нравится больше всего (хотя я его реализовывал только в тестовых целях
). Но есть решение на основе CSS, также хорошо работающее: http://htmlcoder.visions.ru/CSS/?22. Можно сделать, например, "табличную" верстку, и ячейками таблиц разметить основные области. Уже внутри ячеек таблиц можно использовать CSS для позиционирования отдельных элементов этой области.
Почему таблицы? Ну, когда я этим вопросом занимался (полгода назад или больше даже), мне было проще сделать основной каркас на основе таблицы
Спустя 9 минут, 7 секунд (2.01.2010 - 13:53) krasilich написал(а):
обязательно использовать iframe?
div и overflow:scroll ?
div и overflow:scroll ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</div>
<div id="content">Text</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 700px;
margin: 0 auto;
height: 100%;
overflow: hidden;
}
#content {
width: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
position: relative;
overflow: scroll;
}
Спустя 3 часа, 4 минуты, 37 секунд (2.01.2010 - 16:58) Gram написал(а):
| Цитата (see_man @ 2.01.2010 - 10:53) |
| обязательно использовать iframe? div и overflow:scroll ? |
Если не использовать <iframe> - весь смысл сайта в одно место
Все остальное не имеет вообще ни какого значения.
А где можно можно почитать про 'ловим события resize, scroll окна'? У меня 5 электронных книг по js, и ни в одной я не нашел подобного. Поисковик тоже мало чем помогает, видимо я что-то не то спрашиваю.
P.S. У вас случайно не осталось вашей тестовой версии? Хоть увидеть в какую сторону идти.
Спустя 5 часов, 15 минут, 55 секунд (2.01.2010 - 22:14) sergeiss написал(а):
| Цитата (Gram @ 2.01.2010 - 17:58) |
| А где можно можно почитать про 'ловим события resize, scroll окна'? У меня 5 электронных книг по js, и ни в одной я не нашел подобного. Поисковик тоже мало чем помогает, видимо я что-то не то спрашиваю. P.S. У вас случайно не осталось вашей тестовой версии? Хоть увидеть в какую сторону идти. |
Если вопрос ко мне
, то отвечаю. Читай внимательнее, ищи событие onresize для body. Это событие есть только для этого объекта!!!<body onresize="my_func()" onload="my_func()">
где my_func() - это функция, в которой можно, в частности, настроить размеры и расположение любых объектов. Ее лучше использовать при наступлении для 2-х событий: окончание загрузки страницы (onload) и изменение размеров (onresize). Тогда настройка расположения объектов будет произведена максимально грамотно, согласно заложенному алгоритму.
И кстати. В чем смысл использования именно iframe? Его использовать реально необходимо только в отдельных, редких случаях.