• Познакомьтесь с пентестом веб-приложений на практике в нашем новом бесплатном курсе

    «Анализ защищенности веб-приложений»

    🔥 Записаться бесплатно!

  • CTF с учебными материалами Codeby Games

    Обучение кибербезопасности в игровой форме. Более 200 заданий по Active Directory, OSINT, PWN, Веб, Стеганографии, Реверс-инжинирингу, Форензике и Криптографии. Школа CTF с бесплатными курсами по всем категориям.

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

  • Автор темы Alexx (SPb)
  • Дата начала
A

Alexx (SPb)

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

Прошу содействия. Есть скрипт для расчета ширины и высоты основного для главной страницы 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"> не работает. Подскажите решение.
 
F

fvoice

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

garrymax

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

А если сУрьезно, то для 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. Тогда точно все будет работать и кода будет меньше.
 
M

maykoff

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

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

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

по поводу знания javascript
Код:
document.all
забудь такую конструкцию, есть стандарты

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

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

Alexx (SPb)

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

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

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

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

maykoff

Вариантов решения много. Вот один из них:
Код:
<!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), правая - на весь экран.
При дальнейшей вёрстке следует учитывать важный момент - высоты у обоих блоков НЕТ, она зависит от их наполнения, поэтому если стоит задача их раскрасить в разные цвета - то это отдельная тема. С традиционным "табличным" блоком внизу - та же фигня.
Рекомендую:
 
A

Alexx (SPb)

Вариантов решения много. Вот один из них:
Код:
...
левая колонка фиксирована (суммарно - 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-ами?
 
M

maykoff

Нужно уточнить задачу.
Высота 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>
 
A

Alexx (SPb)

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

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

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

maykoff

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

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

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

Обучение наступательной кибербезопасности в игровой форме. Начать игру!