为什么这里的banner背景要设置高度才不会塌陷

老师课上说的是不需要设置高度，高度靠内容填充呢

不停奔跑的小恐龙 2019-09-09

源自：前端油画商城案例 4-3 项目作业

收起

4回答

提问者不停奔跑的小恐龙 2019-09-09 20:21:10

老师可以尝试着解释下为什么会这样吗，明明banner在header的下面不是应该按照文档流上下排列吗，我在页面后台看到是content顶着body显示了所以它的子元素banner才会这样，那为什么会这样呢，

收起回答

芝芝兰兰 #1

因为同学的header设置了 position: fixed; 脱离了文档流，所以content才会上移呢~祝学习愉快~

2019-09-10 10:51:07

芝芝兰兰 2019-09-09 18:10:39

同学你好。此时的页面不显示图片，不是因为塌陷问题，而是 <div class="beijin"></div>中没有有高度的内容。加了overflow:hidden后它是自适应的，但也需要有高度的内容“撑起它”才能显示出背景图片呢。比如：

但是在这里建议同学不要使用自适应高度的方式，这个效果不适合使用自适应来达到。后续的遮罩层还需要用到这个高度。并且为了撑起来它还需要冗余一个div。建议同学还是使用height哦~

祝学习愉快~

收起回答

提问者不停奔跑的小恐龙 #1

我的banner图有一部分跑到header部分下去了，这个要怎么解决呢，我一下子找不到原因呢，麻烦老师指点谢谢

2019-09-09 18:40:38
芝芝兰兰回复提问者不停奔跑的小恐龙 #2

同学你好。为banner添加 margin-top: 80px; 属性即可。祝学习愉快~

2019-09-09 19:21:11
提问者不停奔跑的小恐龙回复芝芝兰兰 #3

还有一个疑问，回复在回答区了，麻烦老师查看，谢谢！

2019-09-09 20:21:49

提问者不停奔跑的小恐龙 2019-09-09 17:59:57

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="CSS/common.css">
	</head>
	<body>
		<div class="header">
			
			<div class="logo">
				<img src="images/logo.png" />
			</div>
			<div class="menu">
				<ul>
					<li>HOME</li>
					<li>ABOUT</li>
					<li>GALLERY</li>
					<li>FACULTY</li>
					<li>EVENTS</li>
					<li>CONTACT</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="banner">
				<div class="beijin"></div>
				
			</div>
		</div>
		<div class="footer"></div>
	</body>
</html>

*{
	padding: 0px;
	margin: 0px;
}
.header{
	width: 100%;
	height: 80px;
	line-height: 80px;
	background-color: #07cbc9;
	position: fixed;
}
.header .logo img{
	margin-left: 90px;
	float: left;
	margin-top: 15px;
}
.header .menu{
	height: 80px;
	line-height: 80px;
	float: right;
}
.header .menu li{
	float: left;
	line-height: 80px;
	margin-right: 10px;
	list-style: none;
}
.content{
	width: 100%;
	height: auto;
	overflow: hidden;
	
}
.content .banner{
	
}
.content .banner .beijin{
	background: url(../images/banner3.jpg);
	width: 100%;
	 /* height: 800px; */
	background-repeat: no-repeat;
	background-size:100% auto ;
	/* float: left; */
}

按照老师的提示添加了overflow任然是不现实图片呢

收起回答