0
为什么当高度：50％（我认为应占用页面的一半）时，不显示class .topcontainer类的div，但设置为500px时会显示？我试图创建一个响应页面，我是新来的CSS/HTML。为什么我的div不在高度设置为50％时显示，而是在设置为500px时显示？
以下是高度：50％
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
\t font-family: "Roboto", sans-serif;
\t margin: 0px;
\t background-color: #AA3939;
}
div.container {
\t width: 100%;
\t height: 100%;
\t position: relative;
}
div.topcontainer {
\t background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
\t background-repeat: no-repeat;
\t background-size: cover;
\t position:relative;
\t width: 100%;
\t height: 50%;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="mobile.css">
\t \t <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
\t \t <!--<script src="masonScript.js"></script>-->
\t \t <title>majic.photography</title>
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <div class="topcontainer">
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t </body>
</html>这只是显示了空白背景。 而下面是高度：500px。
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
\t font-family: "Roboto", sans-serif;
\t margin: 0px;
\t background-color: #AA3939;
}
div.container {
\t width: 100%;
\t height: 100%;
\t position: relative;
}
div.topcontainer {
\t background-image: url("https://scontent-lga3-1.cdninstagram.com/t51.2885-15/e35/20633567_1572345419476732_8981370747351990272_n.jpg");
\t background-repeat: no-repeat;
\t background-size: cover;
\t position:relative;
\t width: 100%;
\t height: 500px;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="mobile.css">
\t \t <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
\t \t <!--<script src="masonScript.js"></script>-->
\t \t <title>majic.photography</title>
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <div class="topcontainer">
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t </body>
</html>这显示了容器，但是不响应和移动显示器并不好。
在此先感谢！
'height：50％;'div的计算高度为零...零的50％仍然为零...如果您希望将“视口”的高度减半，请尝试50vh –
@JaromandaX - 轻微的琐事 - div已经计算出50％的高度。它有一个* used *高度为零。请参阅https://jsfiddle.net/q0dd6e4o/，以了解有关情况， – Alohci
True。我的措辞不是100％准确的 –