размер Div-а в разных браузерах

Alexx (SPb) · 02.01.2008

Всем привет! С наступившим Новым Годом!

Прошу содействия. Есть скрипт для расчета ширины и высоты основного для главной страницы div-а:
<script language="javascript">
w=document.body.clientWidth-200; h=document.body.clientHeight-70;
var ddd=document.getElementById('divwin');
if(w<400) w=400; if(h<500) h=500;
ddd.style.width=w; ddd.style.height=h;
</SCRIPT>

Проблема в том, что в разных браузерах отображение div-а кривое, правая граница в ff и опере уползает далеко вправо. Что еще важнее - при изменении размера окна браузера необходимо автоматическое изменение размера div-а, но конструкция типа <body onResize="java script:document.all.div777.style.width=document.body.clientWidth-200"> не работает. Подскажите решение.

fvoice · 03.01.2008

Для: Alexx (SPb)
программно определяйте браузер,
clientHeight и clientWidth работают только в MSIE, в Netscape, Mozilla, Opera - используется innerWidth, innerHeight

garrymax · 04.01.2008

sax_ol сказал(а):
фф и оперу в топку!!! Мы за ИЕ!!!

Большой пардон, но не дать ли пару ссылок, что бы убить систему и поменять свое мнение?

А если сУрьезно, то для Alexx (SPb) OnResize работает -

Ссылка скрыта от гостей

или

Ссылка скрыта от гостей

- со второго варианта посмотри в функции MainWinResize строки

Код:

 if(document.all){ AvailWidth = document.body.clientWidth; AvailHeight = document.body.clientHeight;
}else{		  AvailWidth = innerWidth;				AvailHeight = innerHeight;	}

про которые говорил fvoice (document.all для Ослика до 6-ой версии включительно) и старайся везде использовать стандарт DHTML - будет во всех браузерах одинаково. Если не понятно, то конкретнее: Надо по возможности забыть про document.all и стараться помнить про document.getElementById - для данного вопроса этого будет достаточно.

Еще: Рекомендую вынести ресайз ДИВа в отдельную функцию и применять ее при onLoad и onResize. Тогда точно все будет работать и кода будет меньше.

maykoff · 06.01.2008

в разных браузерах отображение div-а кривое

кривое оно только у IE

правая граница в ff и опере уползает далеко вправо

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

скрипт для расчета ширины и высоты основного для главной страницы div-а

скорее всего это - попытка компенсировать незнание html & css знанием javascript. Насколько я понял проблему - она элементарно решается, ВООБЩЕ не прибегая к javascript. То, чего автор пытается добиться с помощью javascript - является одним из основных свойств блока

по поводу знания javascript

Код:

document.all

забудь такую конструкцию, есть стандарты

фф и оперу в топку!!! Мы за ИЕ!!!

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

А по поводу вопроса - код в студию (желательно не 800 строк реального кода, а 10 строк абстрактного минимума, необходимого для понимания проблемы)

Alexx (SPb) · 07.01.2008

Всем спасибо. Сформулирую свой вопрос иначе:

Каким образом можно корректно задать ширину div-а, которая должна быть равна ширине окна браузера минус 200 пикселей (которые отведены под левое меню фиксированной ширины)?

Таблица не подходит, нужен только div (внутри которого будет текст с прокруткой).
И каким образом задать авторесайз div-а при изменении размера окна браузера?

Заранее спасибо.
С Рождеством!

maykoff · 08.01.2008

Вариантов решения много. Вот один из них:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test</title>
<style type=text/css><!--
body {
margin:0px;
padding:0px;
background-color:#FFFFFF;}
#menu {
float:left;
width:180px;
padding:10px;}
#page {
padding:10px;
padding-left:210px;}	
//--></style>
</head>
<body>
<div id="menu">
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
</div>
<div id="page">
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
</div>
</body>
</html>

левая колонка фиксирована (суммарно - 200px), правая - на весь экран.
При дальнейшей вёрстке следует учитывать важный момент - высоты у обоих блоков НЕТ, она зависит от их наполнения, поэтому если стоит задача их раскрасить в разные цвета - то это отдельная тема. С традиционным "табличным" блоком внизу - та же фигня.
Рекомендую:

Ссылка скрыта от гостей

Alexx (SPb) · 08.01.2008

maykoff сказал(а):
Вариантов решения много. Вот один из них:

Код:

...

левая колонка фиксирована (суммарно - 200px), правая - на весь экран.
При дальнейшей вёрстке следует учитывать важный момент - высоты у обоих блоков НЕТ, она зависит от их наполнения, поэтому если стоит задача их раскрасить в разные цвета - то это отдельная тема. С традиционным "табличным" блоком внизу - та же фигня.
Рекомендую:
Ссылка скрыта от гостей

Высота div-а как и его ширина тоже нужна фиксированная - высота окна браузера минус шапка высотой 100px над div-ом. В окне div-а будет много текста с прокруткой.
Фреймами это легко реализуется:

Код:

<frameset rows="100,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="200,*">
<frame src="menu.html" name="leftFrame" scrolling="no" noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>

Тут звездочки всё решили =) Но фреймы отвергаются. Как подобное реализовать div-ами?

maykoff · 08.01.2008

Нужно уточнить задачу.

Высота div-а как и его ширина тоже нужна фиксированная

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

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test</title>
<style type=text/css><!--
body {
margin:0px;
padding:0px;
background-color:#FF0000;}
#menu {
float:left;
width:180px;
padding:10px;
}
*html #page {
height:500px;}
#page {
min-height:500px;
background-color:#FFFF00;
padding:10px;
margin-left:210px;}
#x {
background-color:#00FF00;}
#both {
clear: both;
background-color:#FF0000;
height:50px;}	  
//--></style>
</head>
<body>
<div id="x">
<div id="menu">
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
<a href="">xxxxxxxxx</a><br>
</div>
<div id="page">
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
test test test test test test test test test test test test test test test test test test test test test 
</div>
</div>
<div id="both">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
</body>
</html>

Alexx (SPb) · 08.01.2008

maykoff сказал(а):
Нужно уточнить задачу. - уж больно специфическое требование, мне кажется, что в данной ситуации задача совсем иная. Попрыгав с бубном, могу предположить, что нужно следующее:

Код:

...

Не то. И при большом кол-ве текста div не скроллится, а растягивается вниз.

Еще раз исходная ситуация:
1. Есть шапка 100%-ширины с фиксированной высотой 100px. Далее под ней:
2. Есть левое меню (div) фиксированной ширины 200px и резиновой высоты, которая вычисляется скриптом в начале топика по высоте окна браузера.
3. Есть основной div (position:absolute;top:101px;left:201px;...), резиновые высота и ширина которого тоже вычисляются скриптом в начале топика под соответственно высоту и ширину окна браузера. В основном div-е будет прокручиваться масса текста, выглядит вроде фрейма.

Проблема - в разных браузерах немного отличается ширина основного div-а (правая граница уползает за пределы окна фф и оперы), не работает авторесайз div-а. Прошу подправить скрипт и конструкцию по возможности (можно за вознаграждение).
Или же - как обойтись без скрипта?

maykoff · 09.01.2008

Я понял, нужна имитация фреймовой структуры.
задаёшь абсолютное позиционирование всем элементам: position:absolute;
для растягивания на весь экран - bottom: n px; right: n px;
для горбатого IE6 эмулируешь это :
height=expression(document.body.offsetHeight - xxx); (document.body.offsetWidth)

Для эмуляции фреймов(чтоб содержимое не проваливалось вниз)

verflow:scroll;

Авторесайз не работает, потому что 100% - это 100% родительского объекта, а не "растянуть на сколько можно в пределах родительского объекта", как в табличной вёрстке, этот момент нужно чётко понимать. Почитай ресурс, на который я дал ссылку, там здорово описана css вёрстка.

Все сервисы Codeby

Поиск

Поиск

размер Div-а в разных браузерах

Alexx (SPb)

fvoice

garrymax

maykoff

Alexx (SPb)

maykoff

Alexx (SPb)

maykoff

Alexx (SPb)

maykoff