Два вертикальных деления в пределах 100% высоты - PullRequest
Новая
       50

Два вертикальных деления в пределах 100% высоты

4 голосов
/ 24 марта 2011

Извините за мой плохой английский, надеюсь, вы поймете мою проблему.

Я поворачиваю голову к проблеме, которую, как я знаю, уже однажды решал. Проблема в том, что мне нужно два DIV внутри div, где один из DIV имеет заданную высоту, а другой заполняет оставшуюся часть родительского div-высоты. Проблема в том, что второй div (без заданной высоты или высоты 100%) должен переполняться вертикальной прокруткой. Все это для создания «внешнего вида» подобной оконной установки, где вы управляете списком слева и окном действия справа. Левый список нуждается в заголовке, где вы можете ограничить список, а также поиск.

Посмотрите на http://kokongcrm0.server111.wdc.webdeal.no/index-test.php, чтобы найти пример проблемы.

Вся помощь - это хорошая помощь (!) Заранее спасибо. Я был бы очень рад, если бы кто-то мог помочь!

Ответы [ 3 ]

5 голосов
/ 24 марта 2011

Использование position: relative в сочетании с position: absolute.

Live Demo

Избавьтесь от этих двух последних строк: 

div#iHeader { height:50px; background:#009900; }
div#iWrapper  { height:100%; padding-top:-50px; padding-bottom:-150px; overflow:auto; }

Замените их на: 

div#list {
    position: relative
}
div#iHeader {
    height:50px; background:#009900;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
div#iWrapper { 
    overflow:auto;

    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0
}
1 голос
/ 24 марта 2011

это немного другой способ сделать это, так что вам не нужно использовать верхнюю и нижнюю координаты вместе - таким образом, это может быть сделано для работы в IE7 тоже

(для этого нужно поставитьIE6 / 7, хотя и в режиме Quirks, но, если он используется, см. Комментарий перед Doctype, как это сделать)

JSBIN - IE7-совместимая версия

Это очень похоже на тридцать точек, в нем используется смесь относительного и абсолютного значений, но в этом методе используется модель определения размеров рамки для рамки, поэтому пространство можно создавать с помощью отступов и при этом поддерживать использование высоты: 100%;

0 голосов
/ 24 марта 2011

Удалите этот 1k высоты div и сделайте этот iWrapper ver flow автоматическим.Поэтому измените это: 

<div id="iWrapper">
  <div style="height:1000px;">
    test test
  </div>
</div>

на следующее: 

<div id="iWrapper" style="overflow: auto;">
    test test
</div>

Или добавьте его в таблицу стилей.

...