@charset "utf-8";
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止整个页面滚动 */
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 100%视口高度 */
}
/* 固定头部 */
.header {
  height: 60px;
  padding: 10px;/*内边距*/
  border: 5px double rgba(192, 192, 192,1);/*边框宽度实线颜色*/
  border-radius:10px;/*边框圆角*/
  margin: 10px;/*外边距*/
  flex-shrink: 0; /* 不收缩 */
  text-align: center;/*文本的水平居中对齐*/
}
/* 可滚动内容区 */
figure img{
  border: 5px double rgba(192, 192, 192,1);/*边框宽度实线颜色*/
  border-radius:10px;/*边框圆角*/
  margin: 1%;/*外边距*/
  flex-shrink: 0; /* 不收缩 */
  width: 90%;
  float: left;
}
.content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 内容过多时内部滚动 */
  -webkit-overflow-scrolling: touch; /* iOS顺滑滚动 */
  padding: 10px;
  margin: 10px;
  border: 5px double rgba(192, 192, 192,1);
  border-radius:10px;/*边框圆角*/
  text-align: center;
  
}
/* 固定底部 */
.footer {
  flex-shrink: 0; /* 不收缩 */
  height: 50px;
  padding: 10px;/*内边距*/
  border: 5px double rgba(192, 192, 192,1);/*边框*/
  border-radius:10px;/*边框圆角*/
  margin: 10px;/*外边距*/
  text-align: center;/*文本的水平居中对齐*/
}