发表于: 2019-03-07 23:36:22
1 794
今天的计划:
1.修改了任务六的几个问题,并通过审核(滚动条,border边框,footer小图标)
2.学习了滚动条的制作
3.任务七三个页面的基本布局基本完成,明天继续完善
明天的计划:
1.继续完成任务七
2.有空进行深度思考
遇到的问题:
1.滚动条出不来/////解决
(1)首先要清除外部的滚动条,因为外部滚动条在手机端是无法出现的,只有PC端的浏览器才会显示,其次,这个外部滚动条
会溢出到header和footer,所以在body内加上overflow: hidden
(2)清除外部滚动条后,此时内外都是没有滚动条的,需要在main(文字内容区域的父级盒子)设置overflow-y: scroll,并且必须给一个定值的高度 例如:8rem,我刚开始给的是height: 100%, 所以滚动条出不来。
收获:
1.今天中午在修改任务四的时候发现关于滚动条这个问题,非常的难缠,我按照网上查到资料设置了overflow-scroll,但是根本不起作用。后来发现其实在旁边有一条“溢出”的很长的滚动条,连接了header-main-footer,但是一旦切换到手机模式就会看不到,这就是为什么在手机界面看不到滚动条。
之后经过调试发现,想要去掉外部的长滚动条,只需要在整个body上设置overflow:hidden, 但是此时的内部滚动条还是无法出现。最后发现,只要在main内部,也就是内容区域设置overflow-y: scroll,并且必须给main盒子设定一个固定的高度,切不能设置百分比。
以下是具体步骤:
(1)这是出现了外部“不正常”溢出的滚动条,且在手机端无法看见
(2)现在还没有设置overflow-hidden,所以外部滚动条一直存在
(3)现在还是外部滚动条,且已经切换至手机模拟状态,消失
(4)现在我们在main内容区域,设置了overflow-y: scroll,出现了内部滚动轨迹,但是还没有滚动条
(5)现在我们给了一个固定的高度,且不是百分比为单位,滚动条正常出现,并且手机端也显示正常,设置完毕
总结:
1.Body需要把溢出的部分overflow:hidden
2.在内容区设置overflow-y:scroll
3.给内容区的盒子设置固定的高度
评论