1.有些页面的内容较少，撑不起整个屏幕，结果底部内容显示在了屏幕中间位置。
2.中间部分实现圣杯布局
效果图：
代码：
主要使用了flex:1;
<html>
<head>
<meta charset="utf-8"/>
<title>内容过少时，底部内容不在浏览器最下方</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.container{
display:flex;
flex-direction:column;
width:100%;
height:100%;
text-align:center;
}
.top{
width:100%;
min-height:60px;
}
.middle{
flex:1;
background:#8791b7;
min-height:600px;
display:flex;
}
.center{
flex:1;
}
.left{
width:50px;
background:red;
}
.right{
width:50px;
background:red;
}
.bottom{
width:100%;
min-height:60px;
background:#ccc;
}
/*
flex:1;的作用
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： - 如果包装器中有3个div，则每个div将占用33％
*/
</style>
</head>
<body>
<div class="container">
<div class="top">顶部</div>
<div class="middle">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
<div class="bottom">底部</div>
</div>
</body>
</html>
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
