CSS设置容器和屏幕高度一致

2024年3月17日 80次阅读 来源: suipa

最近项目遇到一个问题，登录页面是全背景图片，需要图片填满屏幕，并且不能出现滚动条

之前有的方法是:

用Js动态获取屏幕的高度并且赋值给容器。
//获取显示器的高度
var containerHeight = $(window).height();
有一个问题需要解决 屏幕变化的时候需要重新检测屏幕的高度，用的方法是：
监听resize事件,从而触发事件重新动态计算并赋值.
$(window).on('resize', function () {
        
});

更好的方法:

完全可以用css实现上面的功能.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login validate</title>
    <style type="text/css">
        html,body,div{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        测试是否全屏
    </div>
</body>
</html>
    原文作者：suipa
    原文地址: https://segmentfault.com/a/1190000016264428
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞