overflow：auto的⽤法详解在开始正⽂前，我介绍⼀下overflow和flex布局的某些⽤法。
overflow：auto；如果内容被修剪，则浏览器会显⽰滚动条，以便查看其余内容。
flex中的属性
display: flex;
flex-direction: column; 主轴为垂直⽅向，起点在上沿。
overflow和flex布局搭配使⽤
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow:auto的⽤法</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />    <link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
html,body{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header{
width: 100%;
height: 100px;
background: #f99;
}
.content{
width: 100%;
height: 100%;
overflow: auto;
background: yellow;
flex: 1;
}
.footer{
width: 100%;
height: 100px;
background: #99f;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="content">
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
<li>111111</li>
这⾥的li要多写⼀些，这样才会显⽰效果，我这⾥为了省篇幅。
</ul>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
要实现overflow: auto；这个效果，⾸先布局，再写样式。
在样式中要在最外边的⽗盒⼦container，加⼊以下样式：
.container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
还有就是⼀定要给html和body给宽度和⾼度100%；
html,body{
width: 100%;
height: 100%;
}
头部和底部都给固定的⾼度，⼀般的app的头部和底部都是固定的，像聊天记录。
.header{
width: 100%;
height: 100px;
background: #f99;
}
.footer{
width: 100%;
height: 100px;
background: #99f;
}
中间的content给定flex：1，并且加上我们的主⾓overflow：auto；超出的内容⾃动裁剪。.content{
width: 100%;
height: 100%;
overflow: auto;
background: yellow;
flex: 1;
}
效果图如下：html的flex布局
中间的内容区可以上下滑动，超出的部分⾃动裁剪了。
万变不离其宗，如果在项⽬中实现某些功能有困难的话，可以先敲⼀个⼩demo，⽐如上⽂中这个demo，也许有⼈说so easy，但让你⽤react写⼀个类似的聊天窗⼝的布局时，你该如何实现？
下⾯这个是我⽤react写的类似于聊天窗⼝的⼩项⽬。
到此这篇关于overflow:auto的⽤法详解的⽂章就介绍到这了，更多相关overflow:auto⽤法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。