在这里插入代码片
<style>
html{
height: 100%;
}
body{
height: 100%;
}
div{
border: 1px solid red;
}
#box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
}
#body{
flex-grow: 1;
display: flex;
justify-content: space-between;
background-color: #20B2AA;
}
#middle{
flex-grow: 1;
background-color: #ADD8E6;
}
#left,#right{
min-width: 23%;
background-color: #DA70D6;
}
#head,#foot{
min-height: 15%;
background-color: #FF4500;
}
#left,#right,#head,#foot,#middle{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="box">
<div id="head">header</div>
<div id="body">
<div id="left">item1</div>
<div id="middle">item2</div>
<div id="right">item3</div>
</div>
<div id="foot">footer</div>
</div>
</body>
</html>
【无标题】
最新推荐文章于 2024-09-10 22:55:28 发布