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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Alexx (SPb), 2 янв 2008.

  1. Alexx (SPb)

    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"> не работает. Подскажите решение.
     
  2. fvoice

    fvoice Гость

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

    garrymax Гость

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

    А если сУрьезно, то для Alexx (SPb) OnResize работает - первый пример или второй пример - со второго варианта посмотри в функции MainWinResize строки
    Код (Text):
     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. Тогда точно все будет работать и кода будет меньше.
     
  4. maykoff

    maykoff Гость

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

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

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

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

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

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

    Alexx (SPb) Гость

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

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

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

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

    maykoff Гость

    Вариантов решения много. Вот один из них:
    Код (Text):
    <!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), правая - на весь экран.
    При дальнейшей вёрстке следует учитывать важный момент - высоты у обоих блоков НЕТ, она зависит от их наполнения, поэтому если стоит задача их раскрасить в разные цвета - то это отдельная тема. С традиционным "табличным" блоком внизу - та же фигня.
    Рекомендую: http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/
     
  7. Alexx (SPb)

    Alexx (SPb) Гость

    Высота div-а как и его ширина тоже нужна фиксированная - высота окна браузера минус шапка высотой 100px над div-ом. В окне div-а будет много текста с прокруткой.
    Фреймами это легко реализуется:
    Код (Text):
    <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-ами?
     
  8. maykoff

    maykoff Гость

    Нужно уточнить задачу.
    - уж больно специфическое требование, мне кажется, что в данной ситуации задача совсем иная. Попрыгав с бубном, могу предположить, что нужно следующее:
    Код (Text):
    <!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>
     
  9. Alexx (SPb)

    Alexx (SPb) Гость

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

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

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

    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 вёрстка.
     
Загрузка...

Поделиться этой страницей