【html】通用布局模式，让容器充满父元素，且center部分始终充满剩余空间，可无限嵌套

源码采用vue3写法实现：Panel.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<!--专用于布局的面板，可以无限嵌套，核心思想是保证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>