为什么我的div不在高度设置为50％时显示，而是在设置为500px时显示？(Why doesn't my div show when height set to 50% but does w

编程入门行业动态更新时间:2024-10-27 02:24:42

为什么我的div不在高度设置为50％时显示，而是在设置为500px时显示？(Why doesn't my div show when height set to 50% but does when it's set to 500px?)

为什么当高度：50％（我认为应该占用页面的一半）时，类.topcontainer的div不显示，但设置为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> 
  
 
 
 这只是显示空白背景。 在这下面是高度：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> 
  
 
 
 这显示容器，但在移动显示器上不响应并且不好。  
 提前致谢！ 
Why does the div of the class .topcontainer not show when height:50% (which I assume should take up half of the page) but does when set to 500px? I'm trying to create a responsive page and I'm new to css/html.  
Below is height: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> 
  
 
 
This just shows the blank background. And below this is 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> 
  
 
 
This shows the container, but is not responsive and not good on mobile displays. 
Thanks in advance!
                最满意答案
                
                    
                         尝试这个！ 这个想法是把你的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> 
  
 
 
 干杯 
Try this! The idea is to place your HTML and body at 100% height then you can use percentage in height.  
 
 
  
  @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> 
  
 
 
Cheers