我试图让一个容器在大型设备上占据屏幕的中间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非常接近,没有任何成功。
如果需要任何其他说明,请与我们联系。提前感谢您的任何帮助。