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

2023年12月11日 206次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞