为何下面的div高度只能设置为固定高度？无法设置成视频中的70%
来源：3-3 表示层--图片区域
情人节礼物
2019-05-07 21:36:57
*{
padding:0;
margin:0;
}
body{
background:#999999;
}
span{
display:block;
width:16px;
height:16px;
border-radius:50%;
margin:30px auto 40px;
background-color:white;
}
nav{
width: 70%;
margin: 0 auto 45px;
display: flex;
justify-content: space-between;
position: relative;
}
nav:before{
display: block;
width: 100%;
height: 10px;
background-color: white;
position: absolute;
top: 15px;
content: "";
}
nav>a{
position: relative;
font-size: 14px;
color: #255d7e;
padding: 8px;
border:2px solid #5359b4;
text-decoration: none;
background-color: white;
}
div{
position: relative;
overflow: hidden;
width:70%;
height: 400px;
margin: 0 auto;
background-color: white;
box-shadow: 0 0 120px 120px rgba(80,15,3,.2);
}
div>img{
position: absolute;
width: 98%;
height: 96%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;;
}
1回答
-
好帮手慕慕子
2019-05-08
同学你好，视频中老师是使用vh单位设置的。vh表示相对于视口的高度。1vh = 1% * 视口高度，但是直接给div设置百分比高度， 是参照父级body的高度计算的。由于body默认是没有高度的（由子元素撑开）。所以直接使用百分比是不可以的。
示例： body元素中没有内容， 高度是为零哦。
如果同学想要使用百分比设置， 可以添加一个样式，给html,body设置百分百的高度， 充满窗口， 然后给div使用百分比设置
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题