<body>
<div class="content">
<div class="content-top">
<div class="top-box"><h1>德玛西亚</h1></div>
</div>
<div class="content-bottom">
<div class="bottom-boxl"><h1>马来西亚</h1></div>
<div class="bottom-boxr"><h1>索玛利亚</h1></div>
</div>
</div>
</body>
<style>
body{
height: 1080px;
}
.content {
position: fixed;
left:0;
top: 0;
height: 90%;
width: 90%;
border: 3px solid blue;
margin:30px;
}
.content-top{
height: 50%;
}
.content-bottom{
height: 50%;
position: relative;
}
.top-box{
width: 50%;
margin:0 auto;
height: 96%;
box-sizing: border-box;
border: 3px dashed purple;
}
.bottom-boxl{
position: absolute;
left:0;
width: 45%;
height: 96%;;
box-sizing: border-box;
border: 3px dashed purple;
}
.bottom-boxr{
position: absolute;
right: 0;
width: 45%;
height: 96%;
box-sizing: border-box;
border: 3px dashed purple;
}
</style>
效果如下：
归来仍是少年
