This question already has answers here:
Percentage Height HTML 5/CSS
                                
                                    (6个答案)
                                
                        
                                2年前关闭。
            
                    
对于一个项目,我开始制作一个包含横幅(占页面80%)的模板。

昨天我在使用%时遇到问题。 %不是为我工作,而vh是。有人说,问题是我放置背景的div也位于div中,但没有高度。所以我将其定义为100%。但是仍然不起作用。 background-image与div本身的内容一样大。

我的代码:



@charset "utf-8";
/* CSS Document */
/*MAIN*/
body{
	width: 100%;
	height: 100%;
}
/*BANNER*/
#banner{
	width: 100%;
	height: 100%;
	background-color: black;
}
#bannerimg{
	background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	height: 80%;
}

<!DOCTYPE html>
<html>
	<head>
		<!--ALGEMEEN-->
		<meta charset="utf-8">
		<title>Homepagina - RC paneel</title>
		<!--FONT-->
		<!--INCLUDE-->
		<link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
		<script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<!--STYLE-->
		<link rel="stylesheet" href="css/index.css">
		<!--SCRIPT-->
	</head>
	<body>
		<!--BANNER-->
		<section id="banner">
			<!--NAVBAR-->
			<!--BANNER-->
			<div id="bannerimg">
				Test
			</div>
		</section>
		<!--OVER ONS-->
		<!--VEELGESTELDE VRAGEN-->
		<!--CONTACT-->
	</body>
</html>

最佳答案

html添加到body选择器中,您必须具有body的高度参考



@charset "utf-8";
/* CSS Document */
/*MAIN*/
html, body{
	width: 100%;
	height: 100%;
}
/*BANNER*/
#banner{
	width: 100%;
	height: 100%;
	background-color: black;
}
#bannerimg{
	background-image: url("https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	height: 80%;
}

<!DOCTYPE html>
<html>
	<head>
		<!--ALGEMEEN-->
		<meta charset="utf-8">
		<title>Homepagina - RC paneel</title>
		<!--FONT-->
		<!--INCLUDE-->
		<link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
		<script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
		<!--STYLE-->
		<link rel="stylesheet" href="css/index.css">
		<!--SCRIPT-->
	</head>
	<body>
		<!--BANNER-->
		<section id="banner">
			<!--NAVBAR-->
			<!--BANNER-->
			<div id="bannerimg">
				Test
			</div>
		</section>
		<!--OVER ONS-->
		<!--VEELGESTELDE VRAGEN-->
		<!--CONTACT-->
	</body>
</html>

关于html - CSS-vh可以工作,但百分比不能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53069424/

10-12 12:46
查看更多