HTML网页背景图很长要有滚动条滑动

时间：2023-03-08 17:34:10

1 前言

由于网页背景图非常长，然后会出现只显示当前页面，后面部分看不到，也不能滑动，开始以为不能滑动应该是没有加overflow-y: auto(scroll)，结果加上去也是无效的。

2 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<title>长背景图测试/title>

<style type="text/css">

        //body里面的属性min-height是关键，网上说直接设置成100vh即可，如果不可以可以自己微调

	body{

		background:url(./images/download_bg.png) no-repeat;

		background-size:100%;

                //方案1

		min-height: 185vh;

                //方案2，本质等价于方案一,如果两个方案是同时开启，则会使用高度更小的那个，已测试

                //height:1200px;

	}

	#btn{

		margin-top: 150px;

		text-align: center;

	}	

</style>

<body>

<div id="btn">

	<a href=" http://www.cnblogs.com/fanbi">

	<img src="./images/download_btn.png" width="90%" alt="跳转到某个网页地址"/></a>

</div>	

</body>

</html>

3 小结

仅作为记录，如果能帮到看到此篇文章的你，那就更好了。