}
.main{
flex:1;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="box">
<div class="left">左侧悬挂</div>
<div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>
</div>
全屏布局
CSS Code复制内容到剪贴板
<style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.parent{
display: flex;
flex-direction: column;
}
.top,.bottombottom{
height: 50px;
}
.middle{
display: flex;
flex: 1;
}
.left{
width: 100px;
margin-right: 20px;
}
.rightright{
flex: 1;
overflow: auto;
}
.rightright-in{
height: 1000px;
}
</style>
XML/HTML Code复制内容到剪贴板
<div class="parent" id="parent" style="background-color: lightgrey;">
<div class="top" style="background-color: lightblue;">
<p>top</p>
</div>
<div class="middle" style="background-color: pink;">
<div class="left" style="background-color: orange;">
<p>left</p>
</div>
<div class="right" style="background-color: lightsalmon;">
<div class="right-in">
