Angular Flex Layout根据屏幕大小调整容器宽度

时间:2018-06-10 20:58:12

标签: angular sass angular-flex-layout

我试图让一个容器在大型设备上占据屏幕的中间50%,否则占据屏幕的100%。

chat-container div是我尝试根据屏幕大小调整大小的。

<div class="chat-container"
     fxFlex="50%"
     fxFlex.lt-lg="100%">
    <div class="conversation">
    <...>
    </div>
</div>

scss如下:

$conversation-height: calc(100% - #{$input-height});
$tab-height: 48px;

.chat-container {
   position: fixed;
   top: $toolbar-height + $tab-height;
   bottom: 0;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   box-shadow: -60px 0px 150px -90px #000000, 60px 0px 150px -90px #000000;
}

.conversation {
  height: $conversation-height;
  padding: 2% 4% 0 4%;
  overflow-y: auto;
}

我在文档之后模拟了我的Flex策略,this example非常接近,没有任何成功。

如果需要任何其他说明,请与我们联系。提前感谢您的任何帮助。

0 个答案:

没有答案