overflow:auto☏的使用方法详细说明
时间:2021-01-21 00:07 来源:未知 作者:jianzhan 点击:次
|
在刚开始文章正文前，我详细介绍一下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{
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;
}
实际效果图以下：
正中间的內容区能够左右拖动，超过的一部分全自动剪裁了。 到此这篇有关overflow:auto的使用方法详细说明的文章内容就详细介绍到这了,大量有关overflow:auto使用方法內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！ (责任编辑：admin) |