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％準確的 –