问答题【1080/1587】下面这段代码中，class为content的元素，实际高度是100px吗？
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Static Template</title> 8 9 <style> 10 .parent { 11 display: flex; 12 flex-direction: column; 13 height: 600px; 14 width: 300px; 15 background: yellow; 16 } 17 div { 18 width: 100%; 19 } 20 .header { 21 height: 200px; 22 background: red; 23 } 24 .content { 25 height: 100%; 26 background: blue; 27 } 28 .footer { 29 height: 200px; 30 background: black; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="parent"> 36 <div class="header"></div> 37 <div class="content"></div> 38 <div class="footer"></div> 39 </div> 40 </body> 41</html>
难度：
2022-03-24 创建参考答案
题目要点
个人笔记
参考答案：
答案： 不是
首先，content元素的 height 设置为 “100%”，在父级的高度为固定值时，直接继承该高度，也就是600px。
但父级设置了 display:flex ，在高度固定的前提下，子元素的高度会按比例进行缩放，所以content元素最后的高度应该是 600 * (600/(200+600+200)) = 360px
在线demo可访问查看： https://codesandbox.io/s/strange-curran-3kci7i?file=/index.html
本题目答案由“前端面试题宝典”整理，PC端可访问 https://fe.ecool.fun/
最近更新时间：2024-07-19
