Макет CSS с отдельными фиксированными, прокручиваемыми областями содержимого

Пытаюсь добиться желаемой функциональности в моем макете CSS.

На основе этой базовой структуры https://jsfiddle.net/606ep8g7/6/. Я пытаюсь заставить следующие части работать вместе:

<body>
    <div id="A">
        <div id="A1">
        </div>
        <div id="A2">
        </div>
        <div id="A3">
        </div>
    </div>
    <div id="dragbar"></div>
    <div id="B">
    </div>
</body>
  • 2 контейнера: #A и #B с div для изменения их размера относительно друг друга.

  • #A является фиксированным (без прокрутки) и содержит 3 элемента div: #A1 – фиксированный логотип, #A2 – панель навигации, и #A3, который является контейнером для списка jstree.

#A1 имеет фиксированную высоту, а #A2 оборачивает свое содержимое, которое всегда должно быть видно. Это работает нормально.

Я пытаюсь заставить #A3 иметь автоматические полосы прокрутки внутри фиксированного элемента #A, в то же время добиваясь полос прокрутки на #B. strong> когда контент выталкивается за пределы окна, и я не могу заставить их работать.

Я просто не могу найти правильную комбинацию, чтобы все это работало должным образом. Если я сделаю #A3 position:absolute, я смогу получить полосы прокрутки, но они больше не связаны с динамической настройкой #A2. Но когда относительно, #A3 не расширяется до нижней части окна и не автоматически размещает полосы прокрутки при переполнении содержимого. Я не могу исправить высоту DIV, потому что она динамически заполняется И ее нужно настроить с помощью #A2. Есть идеи?


person stacked    schedule 03.03.2015    source источник
comment
Вы пытались установить высоту # A3 на 100%?   -  person Da Rod    schedule 03.03.2015
comment
Это устанавливает высоту #A3s на 100% высоты родителя, я полагаю, а не оставшееся пространство родителя под #A1 и #A2. Если вы попробуете это в скрипке, #A3 прокрутится намного ниже видимого окна, но вы не сможете увидеть нижнее содержимое.   -  person stacked    schedule 03.03.2015


Ответы (2)



Поскольку вы используете javascript для динамического изменения ширины, вы можете сделать то же самое с высотой.

$('#A3').css('height', $('#A').outerHeight() - $('#A1').outerHeight() - $('#A2').outerHeight())

Я установил начальную высоту #A3 на основе высоты двух других элементов, используя javascript. Точно так же высота # A3 изменяется при движении мыши. Это не чисто CSS-решение, но, поскольку вы манипулируете шириной с помощью JS, нет причин не делать то же самое с высотой.

http://jsfiddle.net/3bdenypq/2/

person Da Rod    schedule 03.03.2015
comment
Это было бы простой проблемой, если бы #A2 не нужно было хранить содержимое встроенным и обернутым. Даже не полагаясь на ненадежную функцию calc, я мог бы установить #A3 как абсолютную и просто указать фиксированные позиции top и bottom, и все готово. Но в данной ситуации (исходя из необходимых свойств #A2) это не такое простое решение. Но спасибо за мысль. - person stacked; 03.03.2015
comment
на самом деле это все еще не работает из-за того, что оно снова становится ниже необходимого. 100% - person Da Rod; 03.03.2015
comment
Я изменил свое решение с помощью JS. пожалуйста, смотрите скрипку. - person Da Rod; 03.03.2015
comment
Я не уверен, что скрипка обновлена. Я собирался сдаться и изучить решение JS, так что спасибо за этот код выше. Приведенное ниже решение для flexbox от GCyrillus представляет собой чисто CSS-решение, которое работает в современных браузерах, но ваше JS-решение работает так же хорошо. - person stacked; 03.03.2015
comment
похоже, я забыл нажать «обновить». это должно работать сейчас. извините, я не смог предоставить что-то чисто CSS. я думаю, что CSS станет более гибким в будущем, как только они начнут разрешать переменные. - person Da Rod; 03.03.2015
comment
Работает хорошо. Просто нужно обновить ссылку в вашем сообщении на новую скрипку: jsfiddle.net/3bdenypq/2 Еще раз спасибо, и согласился на CSS; он прошел долгий путь, но, к сожалению, еще предстоит пройти долгий путь. - person stacked; 03.03.2015