为什么 .topcontainer 类的 div 在 height:50%(我认为应该占页面的一半)时不显示，但设置为 500px 时却显示？我正在尝试创建一个响应式页面，但我是 css/html 的新手。
下面是高度:50%
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 50%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>这只显示空白背景。 下面是 height:500px。
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 500px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>这显示了容器，但没有响应并且在移动显示器上效果不佳。
提前致谢!
最佳答案
试试这个! 这个想法是将您的 HTML 和正文放在 100% 高度，然后您可以使用高度百分比。
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
html,body{width:100%; height:100%;}
body {
font-family: "Roboto", sans-serif;
margin: 0px;
background-color: #AA3939;
}
div.container {
width: 100%;
height: 100%;
position: relative;
}
div.topcontainer {
background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
background-repeat: no-repeat;
background-size: cover;
position:relative;
width: 100%;
height: 50%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="masonScript.js"></script>-->
<title>majic.photography</title>
</head>
<body>
<div class="container">
<div class="topcontainer">
</div>
</div>
</body>
</html>干杯
关于html - 为什么我的 div 在高度设置为 50% 时不显示，但在设置为 500px 时显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45666015/