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

stefanieliang 发布于2019-08-29 16:37 / 1817人阅读

摘要：最近项目遇到一个问题，登录页面是全背景图片，需要图片填满屏幕，并且不能出现滚动条之前有的方法是用动态获取屏幕的高度并且赋值给容器。

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

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

更好的方法:

完全可以用css实现上面的功能.



    
    login validate
    


    
        测试是否全屏

容器云屏幕高度宽度 js获取屏幕高度 js 屏幕高度渐变 js如何判断屏幕高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113869.html

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

摘要：最近项目遇到一个问题，登录页面是全背景图片，需要图片填满屏幕，并且不能出现滚动条之前有的方法是用动态获取屏幕的高度并且赋值给容器。最近项目遇到一个问题，登录页面是全背景图片，需要图片填满屏幕，并且不能出现滚动条之前有的方法是: 用Js动态获取屏幕的高度并且赋值给容器。 //获取显示器的高度 var containerHeight = $(window).height(); 有一个问...

沈建明 2019-08-23 11:43 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0