为什么我的div不在高度设置为50%时显示,而是在设置为500px时显示?
问题描述:
为什么当高度: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>
这显示了容器,但是不响应和移动显示器并不好。
在此先感谢!
答
试试这个! 这个想法是将你的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 {
\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>
干杯
答
如果你只是想topcontainer成为浏览器的高度的50%,你可以只使用
高度:50vh;
而不是50%。 50vh将使您的topcontainer达到浏览器窗口高度的50%。 除此之外,您可以为较小的窗口添加500px的最小高度值。
'height:50%;'div的计算高度为零...零的50%仍然为零...如果您希望将“视口”的高度减半,请尝试50vh –
@JaromandaX - 轻微的琐事 - div已经计算出50%的高度。它有一个* used *高度为零。请参阅https://jsfiddle.net/q0dd6e4o/,以了解有关情况, – Alohci
True。我的措辞不是100%准确的 –