- 经常会用到这种布局,怎样实现呢?
<style>
html{
height:100%;
}
body{
height:100%;
margin: 0px;
}
.all{
height:100%;
}
.top{
height:50px;
position:fixed;
background-color:blue;
}
.left{
width:15%;
height:100%;
position:fixed;
top:50px;
left:0px;
background-color:green;
}
.contentbg{
width:85%;
height:100%;
position:fixed;
top:50px;
left:85%;
background-color:orange;
}
.content{
width:85%;
position:relative;
left:15%;
top:50px;
background-color:red;
}
</style>
<template>
<!-- 嵌套在body中 -->
<div class="all">
<div class="top">1</div>
<div class="left">2</div>
<div class="contentbg">3</div>
<div class="content">4</div>
</div>
</template>
- 试试吧,一定要记住,所有的元素都放在直接能撑开body宽度的盒子了,直接子元素,不能嵌套,不然会被内容撑开高度而不是所有的浏览器高度了。
© 著作权归作者所有