帮忙看下为什么foot的高度设置为百分比无效

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html>
 
<html style="height: 100%">
 
<head>
 
 <meta charset="utf-8">
 
 <title>CSS综合布局</title>
 
 <style type="text/css">
 
  *{
 
   padding: 0px;
 
   margin: 0px;
 
  }
 
  .body{
 
   width: 100%;
 
   height: 30%;
 
   background-color: #87cefa
 
  }
 
  .body img{
 
   width: 30%;
 
   height: 220px;
 
   padding-left:13.33333%;
 
  }
 
  .img{
 
   padding: 10px 0px;
 
  }
 
  .foot{
 
   width: 100%;
 
   height: 100%;
 
   background-color: pink;
 
   border: 1px solid;
 
  }
 
  .foot img{
 
   line-height: 100%;
 
  }
 
  .container{
 
   width: 100%;
 
   height: 100%;
 
   border: 1px solid;
 
  }
 
 </style>
 
</head>
 
<body style="width: 100%">
 
<div class="container">
 
 <div class="body">  
 
  <div class="img"> 
 
   <img src="
http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg
">
 
   <img src="
http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg
">
 
  </div>
 
 </div>
 
 <div class="foot">
 
  <div img2>
 
   <img src="
http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg
">
 
   <img src="
http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg
">
 
   <img src="
http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg
">
 
  </div>
 
 </div>
 
</div>
 
</body>
 
</html>

七月的孩子 2018-05-07

源自：CSS网页布局基础 2-14 编程练习

收起

1回答

妮可妮可妮_ 2018-05-08 09:52:09

百分比的大小是相对其父级元素宽高的大小.若其父元素没有确定高度，则无法有效使用height=XX%样式的

祝学习愉快~

收起回答

提问者七月的孩子 #1

是要父元素必须是PX的固定高度吗？

2018-05-08 11:10:17
妮可妮可妮_ 回复提问者七月的孩子 #2

因为整体的body就没有固定的高度,在内容部分设置100%是不生效的,.container的高度是靠里面.body和.foot内容的高度撑起来的,所以设置foot的高度为百分比是无效

2018-05-08 13:40:31