前言
设计很丰满,数据很骨感。有时候我们根据设计师的设计稿去编写页面代码,接入正式的数据后,可能数据不多,渲染后并不足以使得页面占满一屏。而公共的底部元素,需要固定在底部展示;当内容足以撑满一屏时,底部元素又随页面滚动。
常见处理
之前做PC端的项目 ,是使用jQuery编写代码。在页面加载后,通过js代码去判断内容是否超出浏览器的可视高度,根据判断结果,动态地给公共底部元素设置样式。
存在的问题
在vue项目中,获取元素的高度并判断是否添加样式,是不优雅的。
通过js去操作dom元素,性能不佳,导致页面在加载后又重绘。
完美解决方案
Flex布局,可以简便、完整、响应式地实现各种页面布局。(了解更多)
HTML:
<!-- 公共的父元素 -->
<div class="index">
<div class="container">
<!-- 你的页面内容 -->
</div>
<div class="foot">
<!-- 需要自适应的底部内容 -->
</div>
</div>
CSS:
.index{
/* 设置父元素为flex布局 */
display: flex;
/* 设置子元素的排列方向 */
flex-direction: column;
/* 设置子元素在该方向上的对齐方式 */
justify-content: space-between;
}
嘘寒问暖 不如打笔巨款~