Question

为什么高度：50％（我假设它应该占据页面的一半）时类.topcontainer的div不显示但是当设置为500px时？我正在尝试创建一个响应式页面，而且我是css / html的新手。

以下是身高：50％

＆＃13;

@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%;
}

＆＃13;

<!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>

＆＃13;

这只显示空白背景。低于此高度：500px。

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

这显示了容器，但在移动显示屏上没有响应和不好。

提前致谢！

Answer 1

试试这个！我们的想法是将您的HTML和正文放置在100％高度，然后您可以使用高度百分比。

＆＃13;

@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%;
}

＆＃13;

<!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>

＆＃13;

干杯

Answer 2

如果您只想让topcontainer达到浏览器高度的50％，您可以使用

身高：50vh;

而不是50％。 50vh将使您的顶级容器成为浏览器窗口高度的50％。除此之外，您可以为较小的窗口添加最小高度值500px。

当高度设置为50％时为什么我的div不显示但是当它设置为500px时？

2 个答案: