【html】通用布局模式,让容器充满父元素,且center部分始终充满剩余空间,可无限嵌套
源码采用vue3写法实现:Panel.vue
<!--专用于布局的面板,可以无限嵌套,核心思想是保证center部分充满整个剩余空间--> <template> <div class="container"> <div class="top"> <slot name="top" /> </div> <div class="middle"> <div class="left"> <slot name="left" /> </div> <div class="center"> <slot name="center" /> </div> <div class="right"> <slot name="right" /> </div> </div> <div class="bottom"> <slot name="bottom" /> </div> </div> </template> <script setup></script> <style scoped lang="scss"> .container { //border: 1px solid red; display: flex; flex-direction: column; height: 100%; width: 100%; .middle { flex: 1; overflow-y: auto; display: flex; flex-direction: row; .center { flex: 1; overflow-y: auto; } } .top, .bottom { flex-shrink: 0; } } </style>