如何控制页面在手机端只能上下滑动
发布网友
发布时间：2022-04-24 14:30
共1个回答
热心网友
时间：2023-10-16 11:53
1、头部定义一个div，固定高度，设置绝对定位(position:absolute)，设置上边距(top:0);
2、底部定义一个div，固定高度，设置绝对定位(position:absolute)，设置下边距(bottom:0);
3、中间定义一个div，设置滚动条自动( overflow: auto); 设置绝对定位(position:absolute)，设置top和bottom，top的值等于头部div的高度，bottom的值等于底部div的高度
示例
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#page{margin:0 auto;width:960px;}
#header{width:960px; height:60px; position:absolute; top:0;background-color:#ccc;}
#footer{width:960px; height:30px; position:absolute; bottom:0; background-color:#ccc;}
#content{width:960px; overflow: auto; position:absolute; top:60px; bottom:30px;}
</style>
</head>
<body>
<div id="page">
<div id="header">定义顶部</div>
<div id="content">content定义中间</div>
<div id="footer">footer定义底部</div>
</div>
</body>
</html>
