后台布局的两种方法
1、浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>通过绝对定位布局后台网站</title>
<link rel="stylesheet" href="">
<style>
*{
margin: 0;
padding: 0;
}
html,body,.container{
height: 100%; /*设置网页占满整个视口，适应不同分辨率*/
}
.top{
height: 120px;
background-color: lightblue;
}
.content{
background-color: #ededed;
width: 100%;
/* position: relative;
top: 0; */
/*使得content得高度自动填满视口剩余部分*/
position: absolute;
top: 120px;
bottom: 0;
}
.left{
width: 220px;
height: 100%; /*设置高度继承*/
float: left;
background-color: teal;
border: 1px solid #ededed;
}
.right{
/* float: left; */ /*若right也浮动，则因为内容没有而导致width为0，若设置固定宽度但不知道container的宽度，所以使得设置该块级元素距离左边有间距后宽度会自动占满一行，所以不能用浮动*/
margin-left: 221px;
background-color: #ccc;
height: 100%; /*设置高度继承*/
padding: 15px;
box-sizing: border-box;
}
.wrapper{
border-radius: 15px;
background-color: pink;
overflow-y: auto;
height: 100%; /*设置高度继承*/
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="content">
<div class="left"></div>
<div class="right">
<div class="wrapper">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
2、伸缩盒布局
不是很懂，感觉有点问题，因为我设置top为120px，然而当它没内容时高度发生了变化？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>伸缩盒布局后台网页</title>
<link rel="stylesheet" href="">
<style>
*{
margin: 0;
padding: 0;
}
html,body,.container{
height: 100%;
background-color: #ccc;
}
.container{
display: flex;
flex-direction: column;
}
.top{
height: 120px;
/* flex-basis: 120px; */
background-color: teal;
}
/* .container > .top > .logo {
font-size: 26px;
line-height: 120px;
padding: 0 2em;
} */
.content{
flex-grow: 1;
display: flex;
/* flex-direction: row; */
overflow-y: scroll;
}
.left{
/* width: 220px; */
flex-basis: 220px;
background-color: lightblue;
}
.right{
flex: 1;
background-color: #ccc;
}
.wrapper{
height: 100%;
overflow-y: scroll;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<!-- <div class="logo">
智慧校园-学生选课系统
</div> -->
</div>
<div class="content">
<div class="left"></div>
<div class="right">
<div class="wrapper">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
