资讯专栏INFORMATION COLUMN

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

stefanieliang / 1686人阅读

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

最近项目遇到一个问题,登录页面是全背景图片,需要图片填满屏幕,并且不能出现滚动条 之前有的方法是:
用Js动态获取屏幕的高度并且赋值给容器。
//获取显示器的高度
var containerHeight = $(window).height();
有一个问题需要解决 屏幕变化的时候需要重新检测屏幕的高度,用的方法是:
监听resize事件,从而触发事件重新动态计算并赋值.
$(window).on("resize", function () {
        
});

更好的方法:
完全可以用css实现上面的功能.



    
    login validate
    


    
测试是否全屏

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

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

相关文章

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

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

    沈建明 评论0 收藏0
  • 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁)

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

    wenzi 评论0 收藏0
  • React Native基础&入门教程:初步使用Flexbox布局

    摘要:图大小的内容在同样尺寸的屏幕中所占据的物理大小一致中字体大小使用另外一个单位,叫做,简称。其中二布局布局,也就是弹性盒模型布局。所以这里最外层的使用了布局的,,表示让它占据了垂直的整个空间。在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击《React Native基础&入门教程:调试React Native应用的一小步》。 在本篇里,...

    番茄西红柿 评论0 收藏0
  • CSS 常用布局在小程序中的应用

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

    garfileo 评论0 收藏0
  • CSS 常用布局在小程序中的应用

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

    CoderDock 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<