最近写了两个页面,真有点心力交瘁!页面bug巨多,都有点把自己给吓倒了,重点是bug还是自己写的,悲哀!,由于布局做的不太好 ,导致到后面样式有点不受控制。页面不能按百分比的铺满整个屏幕,只能是多少内容就有多大。
(图片有点变形见谅)
调试了挺长时间,原因倒是找到了,是div有个样式,它固定了高度导致我在我在加百分比的时候无法起到 应有的效果。
当时我的解决方式是加在子div加100%的高度,但好像没什么效果,又是一顿操作之后还是没什么效果。就退而求其次,固定一个适应页面的高度。最终还是不行,这样做无法做到适应各种不同大小的屏幕。
后面请出了“高人” 出手。大概的做法;首先是确定是什么地方导致出现的问题,一个div,一个div排除,找到准确的位置。确定问题之后找解决办法,一开始也是加百分比高度,发现没效果之后,转而换其它的解决方法。由于高度是引用是自带的,无法去除。然后确认没办法掉之后,重新写一个样式插入div中,左测div问题得以解决。(如图)
右测的解决方式:是通过Vue的一个容器el-container(外层容器。当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列)去掉以前的布局,加入el-container得到适应整个屏幕。