您现在的位置是：网站首页> 编程资料编程资料
详解CSS3原生支持div铺满浏览器的方法
2021-09-04
1202人已围观
简介 这篇文章主要介绍了详解CSS3原生支持div铺满浏览器的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一般我们需要设置一个div与浏览器等高并等宽充满全屏，然后设置背景图片来达到一个高大上的排版效果。具体的例子看下面的图片演示：
随着鼠标的滚动，整个图片也滚上去了。
以前为了达到这样的等高效果，一般通过js来获取当前浏览器高度然后动态设置div的height，有时候还需要不断地检测浏览器resize事件来不断调整div的height。
其实CSS自带的两个单位vw与vh就能支持与浏览器等高等宽的效果，完全可以抛弃js了！
html代码如下:
全屏图片
相关内容
- CSS实现图片等比例缩小不变形的实例代码关于css控制图片大小不变形的实现思路CSS完美解决前端图片变形问题的方法
- css实现带箭头和圆点的轮播通过css动画实现一个表格滚动轮播效果CSS3制作轮播图的一种方法纯HTML和CSS实现JD轮播图效果利用 CSS3 实现的无缝轮播功能代码HTML+CSS+JS实现堆叠轮播效果的示例代码
- 23种CSS垂直居中技巧
- 浅谈最全面的水平垂直居中方案与flexbox布局 利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例CSS3的Flexbox骰子布局的实现及问题讲解基础的CSS3弹性盒Flexbox布局使用实例CSS3的Flexbox布局的简明入门指南css使用flexbox布局容器内多元素水平居中
- css实现导航切换的实例代码CSS 带搜索导航栏的示例代码html+css+js实现导航栏滚动渐变效果css锚点定位被顶部固定导航栏遮住的解决方案不可思议的CSS导航栏下划线跟随效果html+css 实现简易导航栏功能CSS导航条菜单之带小三角形的实现代码CSS设置列表样式和创建导航菜单实现代码CSS中的导航栏和下拉菜单的实现纯CSS + 媒体查询实现网页导航效果CSS3 二级导航菜单的制作的示例
- CSS代码实现三角形和饼图DIV+CSS实现带三角箭头的提示框 用CSS制作三角形和按钮的简单实例CSS仿网易首页的头部菜单栏按钮和三角形制作方法利用CSS伪元素创建带三角形的提示框的实现方法纯CSS绘制三角形箭头图案技术解析css绘制透明三角形解决纯css写三角形在firefox下的锯齿问题
- 深入理解CSS overflow:hidden——溢出,坍塌,清除浮动css中position:relative和overflow:hidden之间的问题CSS--overflow:hidden在项目实例中使用心得分享IE8 css overflow:hidden不起作用CSS教程:CSS让网页文字自动隐藏css中overflow:hidden失效问题的解决方法
- 详解CSS定义字体、颜色、背景等属性简述CSS中的背景属性backgroundcss3实现一个div设置多张背景图片及background-image属性实例演示css 背景固定样式background-attachment属性基础CSS的background属性及CSS3的背景图片设置总结详解CSS3新增的背景属性
- CSS 字体新玩法之彩色字体的实现CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS BEM 命名规范简介(推荐)CSS使用BEM命名规范实践
点击排行
本栏推荐
