让div撑满整个屏幕的方法(css)

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕。

1.给div设置定位。

  复习一下——

  css中position有五种属性:

    static:默认值,没有定位

    absolute:绝对定位,相对于父级元素进行定位

    relative:相对定位

    fixed:固定定位,相对于浏览器窗口进行定位

    inherit:从父元素继承定位信息  

除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应。

代码如下:

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         div{
 7             width:100%;
 8             height: 100%;
 9             background: yellow;
10             position: absolute;
11         }
12
13 </style>
14
15
16 <body>
17
18 <div></div>
19
20 </body>

2. 通过设置html,body的宽高来让div充满屏幕

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         html,body{
 7             width: 100%;
 8             height: 100%;
 9         }
10         div{
11             width:100%;
12             height: 100%;
13             background: yellow;
14         }
15 </style>
16
17 <body>
18 <div></div>
19 </body>
时间: 2024-12-17 06:35:33

让div撑满整个屏幕的方法(css)的相关文章

让div撑满整个屏幕

1.0 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow; position: absolute; } </style> <body> <div></div> </body> 2.0 html,body{ width: 100%; height: 100%; } div{ width:100%; height: 1

手机端背景图片撑满整个屏幕

HTML设置一个空div,用来放置背景图片. <body> <div class="main"></div> </body> (1)方法一:高度100% html,body{ margin:0; height:100%; } .main{ height:100%; background:url('./bg.png') no-repeat ; } (2)方法二:高度100vh .main{ height:100vh; width:100vw

关于块级元素撑满整个浏览器窗口

我们经常会需要将一个块级元素设置大小让它显示在页面中,最常用的就是设置具体的值. 例如在页面上显示一个粉色背景的像素为200px*200px的方形 ... #mydiv{ width:200px; height:200px; background-color:pink } ... <div id="mydiv"></div> ... 如果想让该div撑满整个浏览器窗口呢? 1.获取窗口的大小,然后再将值赋给改div的宽和高.(可以用javascript实现) 2

【css】容器撑满浏览器--- height:100%

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>100% Height CSS</title> <meta http-equiv="Content-Type" cont

jQuery 判断终端是IOS还是Android / jQuery处理背景图片不能撑满屏幕

判断终端并对相应的终端进行不同处理方法(函数) $("#btn_download").click(function () { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $(&

设置一个DIV块固定在屏幕中央(两种方法)

设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <!doctype html> <html lang="zh-cn"> <head> <meta charset="UT

div填满页面剩余空间的方法

想让div填满页面剩余空间,最简易的方式还是靠提前的布局. 这里提供两种方法: (1)利用 height 样式的%比例设置布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

控制DIV占满屏幕

网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小的时候,依然占满窗口高度.且,不论DIV区域内容到底多少,都是占满窗口高度,内容多的时候,显示垂直滚动条.左右窗口显示的是一个信息树,ztree实现, 右边窗口将用datatable实现表格.这里重点是DIV高度占满窗口的高度... 研究了很多方式,最终还是选择了通过js的方式控制DIV占满当前窗口

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas