页脚绝对定位时根据屏幕大小自动调整位置

最新推荐文章于 2023-10-30 10:02:36 发布

咖喱&土豆

最新推荐文章于 2023-10-30 10:02:36 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/qq_35703552/article/details/121285304

版权

本文探讨了在开发中如何处理页面底部按钮始终固定并适应不同屏幕尺寸的问题。通过动态获取并设置DOM元素高度，结合窗口 resize 事件监听，确保元素在页面滚动时保持在底部，同时解决了width控制和屏幕尺寸变化时的样式问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景：

	在开发时经常遇到提交等操作按钮需要始终国定在页面底部的需求，如果我们采用fix定位会以浏览器窗口的相对位置进行定位，这样宽度会不好控制。如果使用绝对定位，当屏幕尺寸变化时往往样式会产生变化，定位的位置就会出现问题。

解决方案

在这里插入图片描述

可以通过动态的获设置对应dom的高度来实现

  mounted() {
            this.$refs['card'].$el.style.height = document.body.clientHeight - 104 + 'px';

            window.onresize = () => {
                return (() => {
                    console.log(document.body.clientHeight);
                    this.$refs['card'].$el.style.height = document.body.clientHeight - 104 + 'px';
                })();
            };
        },