Как исправить 100% высоту, рассчитанную как 0 px с динамическими данными

StackOverflow https://stackoverflow.com/questions/8808311

  •  26-10-2019
  •  | 
  •  

Вопрос

У меня есть страница, которую я начал создавать с помощью файла CSS Bootstrap Twitter. Я хочу, чтобы мой .container-fluid.sidebar и .container_fluid.content составлял 100% от окна и имел автоматические независимые полосы прокрутки. Когда я устанавливаю боковую панель и содержание на следующее

.container-fluid>.sidebar{position:absolute;top:42px;left:20px;width:240px; overflow-y:auto;overflow-x:visible;min-height: 94%;}
.container-fluid>.content{top:42px;margin-left:240px;overflow-y:auto;overflow-x:visible;min-height: 94%;height:94%;}

Высоты рассчитываются как 0PX. У меня есть динамические данные, которые заполняют эти элементы, поэтому они начинаются с

<div class="container-fluid" id="main">
    <div id="navigation" class="sidebar">
        <ul class="treeview"/>
    </div>

    <div id = "mainwindow" class="content">
        <div id="update_panel"/>
    </div>
</div>

Я подтвердил, что все динамические данные заполняются правильно, устанавливая высоты вручную на 600 px.

Это было полезно?

Решение 2

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

Другие советы

Единственный способ, которым я знаю, как это сделать, это JavaScript и «DHTML». Следующее должно сделать трюк для вас, а также измените размер, если пользователь изменяет размер окна. Одна вещь, которая может быть проблематичной, это то, что происходит, когда добавляется горизонтальная прокрутка, которая изменяет количество доступной вертикальной области клиента.

Рутина GetClientHeight должна быть безопасным для кросс-браузера, и все современные браузеры поддерживают getElementbyId.

функция getClientHeight () {

var windowHeight = window.innerHeight ? window.innerHeight :

                          (document.documentElement && document.documentElement.clientHeight ?

                          document.documentElement.clientHeight : document.body.clientHeight);

return windowHeight;

} // function getClientHeight

// Эта процедура установит «высоту» «гарантия» и «Навие».

  function sizeDivs() {

    var cH = getClientHeight();

        var eMW = document.getElementById('mainwindow');

    eMW.style.height = cH + 'px';

    var enav = document.getElementById('navigation');

    enav.style.height = cH + 'px';

  } // function sizeDivs

функция loadevent (e) {

sizeDivs();

} // функция LoadeVent

// Это обработчик «Изменение размера» - когда размер окна изменяется, мы хотим изменить размер нашего DEAP

var resizetimer;

function handleresize () { 

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200);

} // обработка

// СЕЙЧАС пришло время установить загрузку страницы и изменения размер

window.onload = loadevent;

window.onresize = handleresize;

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top