Javascript. Css вопрос - "резиновая высота DIV"

Тема в разделе "Другие языки", создана пользователем Black#FFFFFF, 9 янв 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    174
    Симпатии:
    107
    Итак имеем следующую структруру:
    Код:
    <div id="left" style="float: left; width: 49%;">
    ......хтмл динамически отгружаемый сервером...
    </div>
    <div id="middle" style="float: right; width: 49%;">
    <div id="div_anonce">
    ......хтмл динамически отгружаемый сервером..
    </div>
    <div id="div_events">
    ......хтмл динамически отгружаемый сервером..
    </div>
    </div>
    
    Требуется, чтобы Второй див id="middle" по высоте был всегда таким как первый id="left". А его дочерние дивы id="div_anonce",id="div_events" имели бы по половине высоты родительского.
    И если информации больше в дивах, то тогда появлялись полосы прокрутки внутри двух дочерних дивов (в id="left" полосы прокрутки ненужны, высота динамическая в зависимости от информации подгружаемой с сервера).
    На ум пришло поэксперементировать с яваскриптом и css свойством overflow: auto;

    Нечто похожее на готовое решение далее:

    Код:
    <div id="left" style="float: left; width: 49%;">
    ......хтмл динамически отгружаемый сервером...
    </div>
    <div id="middle" style="float: right; width: 49%; display: none">
    <div id="div_anonce">
    ......хтмл динамически отгружаемый сервером..
    </div>
    <div id="div_events">
    ......хтмл динамически отгружаемый сервером..
    </div>
    </div>
    
    далее вставка после хтмл кода:
    Код:
     ti = false; //таймер
                X=0; //высота всего окна с прокручеваемой областью
                dheight=0; //высота дочерних дивов второго дива
    function div_height()
                {
    
    
    
    
                  if(X==0&&dheight==0)
                  {
                    var offset=...; 
                    var doffset=...; //расчет внутренних оффсетов "на глаз" просто до дивов есть еще код и после них тоже
    
    
                    var br=window.navigator.userAgent.toLowerCase();
                    var clientHeight;
                    var scrollHeight;
    
    
                    if(br.indexOf("msie")!=-1||br.indexOf("mozilla")==-1) //расчитываем для раличных браузеров высоту окна и прокручевоемой области, если таковая есть
                    {
                    clientHeight = document.body.clientHeight;
                    scrollHeight = document.body.scrollHeight;
                    X = Math.max(clientHeight,  scrollHeight)-offset;
                        ti=setInterval(div_height,500); 
    //фиксим прикол overflow в IE 7.0 (свойство применяется но! и увы! баг)
    
                    } else
                    {
                    clientHeight = window.innerHeight+window.scrollMaxY;
                    scrollHeight = document.height + window.scrollMaxY;
                    X = Math.max(clientHeight,  scrollHeight)-offset;
                    }
                    if(X<600)
                        X=600;
    
    
                    dheight = Math.floor((X-doffset)/2);
    
                   } else {
                        if(ti != false)
                            {
                            X -= 2;
                            dheight -=1;
                            clearInterval(ti);
                            }
                   }
                    var mdiv = document.getElementById("middle");
                    mdiv.style.height = X+"px";
    
    
                    var adiv = document.getElementById("div_anonce");
                    adiv.style.height = dheight+"px";
    
                    var ediv = document.getElementById("div_events");
                    ediv.style.height = dheight+"px";
    
                    mdiv.style.display = "";
    
    
                }
    
    
    Ну вот вопрос:

    свойствами только исключительно CSS эта задача решаема?
    Сделать чтобы один див динамически свою высоту подгонял под другой?

    И вопрос второй:
    Мне приходится вызывать еще раз эту функцию для эксплорера 7.0 ибо эта гадость после установки оверфлоу с помощью яваскрипта и задания высоты ДИВА Отказывается рисовать скроллеры - (прокрутка работает, а вот скроллеры визуально отсутствуют до повторного изменения размера областей или щелчка в этой области (причем если принудительно сгенерировать событие click для этих дивов, проблемма не решается, приходится по setInterval вызывать функцию опять и "отнимать" немного высоты)) - другим способом этот баг исправить можно?
     
Статус темы:
Закрыта.