Возможно ли иметь «фиксированный сиден» и прокрутку левой стороны с использованием углового материала?

Я пытался проработать это в течение последних нескольких часов и просто не могу заставить это работать. Я пытаюсь создать 3 столбца, назовем их столбцами A, B, C.Возможно ли иметь «фиксированный сиден» и прокрутку левой стороны с использованием углового материала?

Столбец A и B Я хотел бы прокручивать вместе как единое целое и занимать всю высоту сайта. Столбец C Я бы хотел прокручивать независимо и не прокручивать, когда прокручиваются столбцы A и B.

К сожалению, я не могу создать установку, которая соответствует всем этим условиям и поддерживает полную высоту.

В этом plnkr ниже вы можете увидеть, что зеленые и серые секции должны быть полной высоты, но нет. Я чувствую, что он близок, но последний бит меня заводит!

http://plnkr.co/edit/jPpZhFLP3e1fgNvDLFQD?p=preview

<body layout="row" style="min-height:100%" > 

    <md-content flex layout="row" layout-fill> 

    <div class="side-a" flex layout-fill> 
     <p>lots of content that requires scrolling...</p> 
    </div> 

    <div class="middle" flex layout-fill> 
     <p>lots of content that requires scrolling...</p> 
    </div> 

    </md-content> 

    <md-sidenav layout-fill flex layout="column" class="md-sidenav-left md-whiteframe-z2 side-b" md-component-id="left> 
     <p>lots of content that requires scrolling...</p> 
    </md-sidenav> 

</body>

Спасибо. Любая помощь приветствуется.

источник

2015-04-28 EmptyPockets

Одним из решений является обертывание содержимого столбца в другой div внутри ваших столбцов и использование относительного/абсолютного позиционирования. то есть

<md-content flex layout="row" layout-fill> 

    <div flex layout-fill style="position: relative;"> 
    <div class="side-a" style="position: absolute; width: 100%;"> 
     <p>lots of content that requires scrolling...</p> 
    </div> 
    </div> 

    <div flex layout-fill style="position: relative;"> 
    <div class="middle" style="position: absolute; width: 100%;"> 
     <p>lots of content that requires scrolling...</p> 
    </div> 
    </div> 

</md-content>

Обратите внимание, что классы переместились из самого столбца во внутренний div.

Это работает, потому что абсолютный позиционированный div будет расширяться, чтобы соответствовать любому содержанию внутри него. Недостатком этого метода является то, что если один столбец короче другого, то более короткий столбец не будет охватывать оставшуюся высоту.

источник

2015-04-30 07:18:00

Возможно ли иметь «фиксированный сиден» и прокрутку левой стороны с использованием углового материала?

ответ

Смежные вопросы