This question already has answers here:
Percentage Height HTML 5/CSS
(6个答案)
2年前关闭。
对于一个项目,我开始制作一个包含横幅(占页面80%)的模板。
昨天我在使用
我的代码:
(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/