classname为recommend-link的这个元素设置高度100%的作用是什么？

是意思是让他自适应吗？如果是继承父元素的话，父元素的高度没设置呀

源自：移动端屏幕适配 3-6 通用适配应用--商品推荐

收起

3回答

好帮手慕星星 2020-04-13 10:14:12

同学你好，问题解答如下：

1、第一次回答中老师说过了，height在这里只是将margin-bottom值包括起来而已，没有其他作用，设置或者不设置都是可以的。

2、移动端模拟器里，使用flex布局后，元素最右边总能条白边。说的是哪里呢？老师测试源代码中是没有的

不知道同学想表达的是哪里，建议描述具体一些，便于帮助解决。

祝学习愉快！

好帮手慕星星 2020-04-12 18:20:09

同学你好，前面老师说过的，flex设置可以解决这个问题

所以代码中需要给div添加flex

或者使用不到flex布局的时候，可以使用overflow属性解决

自己可以再测试下，祝学习愉快！

好帮手慕星星 2020-04-12 13:51:48

同学你好，这里recommend-link元素不设置高度为100%，由内容撑起来也是可以的，最终实现效果上没有问题。

这里存在一个底边距的问题：父盒子不设置高度由内容撑起来，最后一个子元素有margin-bottom值的话，父盒子的高度是不包括的。例如

父元素设置display:flex;可以解决这个问题

这里也是一样的，recommend-link元素设置高度为100%，只是包括了下边距16px而已。

自己可以再测试理解下，祝学习愉快！

提问者 lcyjerry #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding:0; margin:0; box-sizing:border-box; } div{ width:500px; height:100%; background-color: yellow; } p{ height:80px; margin-bottom:20px; } </style> </head> <body> <div> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> </body> </html> 这样高度还是没撑起来咋回事呢给父元素设置了高度100%

2020-04-12 14:55:42