css如何让div元素铺满整个屏幕

这个问题我找到了两个解决方案:

1.div{

  position:absolute;

  width:100%;

  height:100%;

}

但是这个方法有一个不好的就是,假如你这个页面是在有其他与div同一等级的元素共同铺满的话,就会在滑动的时候覆盖掉别的元素

2.div{

  width:100vh;

  height:100vh;

}

这个方法就不会出现上面的问题了,不过别的问题我目前还没有发现,等发现了就继续补充

时间: 2024-08-26 15:21:33

css如何让div元素铺满整个屏幕的相关文章

<转载>使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

IE9以下通过css让html页面背景图片铺满整个屏幕

第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="chaozhang5"> <meta name="mail" content=&qu

怎样使绝对定位的子元素铺满父元素并且子元素可以设置padding

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .outer{            width: 500px;            height: 500px;            background-color: gree

Xcode6项目运行在真机上未铺满整个屏幕

如图 解决见图: 再次运行:

页面内容不足以铺满屏幕高度时,footer居底显示

在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,footer下面就会有白块剩余. 现在要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕.而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示: 方法一: html [html] view plain copy <div class="page"> 主要页面 </div> <footer>底部</foo

height与min-height的百分比问题和铺满屏幕的布局方法

1.height的百分比 当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效. <div id="container1"> <div id="wrap"> wrap's height work </div> </div> <br> <div id="container2&q

CSS中如何让元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

CSS(十三).高度如何铺满全屏

该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别.所以,要想写出跨浏览器的CSS,你必须采用标准模式.好像太绝对了,呵呵.好吧,要想写出跨浏览器CSS,你最好采用标准模式. 目前能够找到的有两种方案: A.利用css百分比实现 B.利用css vh 单位实现(直接设置即可,非常简单快捷) vh,是css中的相对长度单位,表示相对