flex排版问题请教
来源：8-4 实战项目：框架搭建
慕村8337265
2021-09-03
你好，我做了一个DEMO，请看图，当我在中间部份插入少量DIV时，上下是可以固定的，但是当我插入了过多的DIV后，就变成第二图了，我希望无论中间插入多少个DIV，都不会把上下两个条给撑开，中间部份搞个滚动条可以滚动查看。下面是源码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" href="iconfont/iconfont.css">
<title>slider</title>
<script type="text/javascript">
</script>
<style type="text/css">
.home{
display: flex;
flex-direction: column;
height: 100vh;
}
.header,.footer{
height: 45px;
background: blue;
flex-shrink: 0;
}
.content{
flex-grow: 1;
background: white;
display: flex;
}
.content-left{
width: 200px;
background: pink;
}
.content-right{
flex-grow: 1;
/*height: 500px;*/
background: skyblue;
overflow: hidden auto;
}
.card{
height: 100px;
background: lightgreen;
margin: 20px;
}
</style>
</head>
<body>
<div class="home">
<div class="header"></div>
<div class="content">
<div class="content-left"></div>
<div class="content-right">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
写回答
1回答
-
西门老舅
2021-09-03
.content{
flex-grow: 1;
background: white;
display: flex;
overflow: auto;
}
这样试试看。除了这样可以实现外，也可以采用 头尾 固定定位的做法。
10
相似问题