Jquery - изменяемый размер DIV с дочерним (100% высота и ширина) и динамическим содержимым - PullRequest
Новая
       14

Jquery - изменяемый размер DIV с дочерним (100% высота и ширина) и динамическим содержимым

0 голосов
/ 20 августа 2011

У меня есть DIV с динамическим контентом и функцией изменения размера.Вот пример -> http://jsfiddle.net/UsRuh/4/

Проблема в динамическом контенте.Пример -> http://jsfiddle.net/UsRuh/5/

Это будет работать только тогда, когда я установлю отступ от #main DIV выше.Пример -> http://jsfiddle.net/UsRuh/6/

Возможно ли (только с CSS, без JS!) Решить эту проблему?

CSS

#header {
    background-color:#faf; }

#main {
    position: absolute; top: 18px; left: 18px; width: 384px; height: 157px;
    padding:0px 0px 80px 0px;
    position: absolute;
    overflow:hidden;}

#scrollDiv {
    background-color:#ccaacc;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 25px;
    width: 100%; }

HTML

<div id="main">

    <div id="header">Head</div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

    <div id="scrollDiv"> some dynamic content width "invisible" scroll<br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text .... ext text </div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

</div>

РЕДАКТИРОВАТЬ: Если другого решения не существует, пожалуйста, сообщите мне.

Ответы [ 3 ]

1 голос
/ 24 августа 2011

Нет доступных кросс-браузерных решений только для CSS.

Единственный способ добиться этого сейчас - использовать дополнительные обертки и display:table + display:table-raw, чтобы это выглядело так: http://jsfiddle.net/kizu/UsRuh/28/

Проблема все еще: IE. IE6 и IE7 не будут понимать table значения свойства display.

Таким образом, есть только два возможных способа преодолеть IE:

  • использовать выражения (но это то же самое, что и использование JS)
  • использовать не семантическую таблицу вместо div, чтобы она работала везде.

Это действительно большая проблема, и макет стола долгое время был единственным возможным решением. Однако в будущем (а теперь и в WebKit и Firefox) мы можем попытаться использовать модель гибкой коробки.

С гибкой коробочной моделью действительно легко достичь того, что вы хотите, только с помощью CSS: http://jsfiddle.net/kizu/UsRuh/29/

И вот почему появилась модель гибкой коробки. Слишком грустно, его доступность все еще не идеальна.

1 голос
/ 20 августа 2011

Если у вас есть только один div с динамическим содержимым ниже прокручиваемого div, вы можете сделать его привязкой к основанию с абсолютным позиционированием. Просто убедитесь, что родитель div (#main) имеет относительное или абсолютное позиционирование.

0 голосов
/ 24 августа 2011

Я внес небольшое изменение в CSS и его можно увидеть по адресу: http://jsfiddle.net/KuzTB/

Я включил псевдокласс CSS3: nth-child (n) и применил его к последнемувнутреннее деление

...