<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin:0px;

            padding:0px;

        }

        .test{

            background-color: pink;

            height: 100%;

            width:100%;

            position:absolute;

        }

    </style>

</head>

<body>

    <div class="test">

        fdsaf

    </div>

</body>

</html>

position如果不设置，body里的div height百分比设置不起作用，具体数值才起作用

让div充满整个body的更多相关文章

  1. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  2. 单个div充满屏幕的CSS方法

    1.通过定位实现 <style> *{ margin: 0; padding: 0; } div{ width:100%; height: 100%; background: yellow ...

  3. 【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）

    这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左 右 中 然后我们来看看代码: 第一种方法:(浮动) <style type ...

  4. HTML DIV充满整个屏幕

    <!DOCTYPE html> <html> <head> <title>A Little Game!</title> <meta c ...

  5. 模仿QQ空间 网页设计

    目的:1.通过模仿QQ空间,全自主写代码,熟悉网页设计的流程 2.熟练的掌握HTML.CSS.JS的应用 3.将在此过程中遇到的问题及其解决方法记录在此,以便取用. 开始: 一.登陆界面(index. ...

  6. H5微场景宽、高度自适应办法

    最近在做一些手机端微场景,发现处理各种手机屏幕分辨率是个很让人头疼的事情,最终找到了一个处理效果比较满意的方案.各位客观请往下看: 如果有过做微场景经历的客官们应该都了解,在代码中给一个元素的宽高设成 ...

  7. 【CSS】整屏大背景

    1. 利用div的层次,设置底层div充满屏幕,并给div设置背景图 <div id="Layer1" style="position:absolute;top:0 ...

  8. retina屏 适配问题

    物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 设备独立像素(density-indepe ...

  9. web前端工程师入门须知

    本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖. 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做w ...

随机推荐

  1. css选择器用法，使用css定位元素，css和xpath元素定位的区别

    css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium ...

  2. java byte/short/char补充（了解）

    1.在数学运算中会自动提升数据类型为 int 2.在基本赋值中,若右册的常量不超过取值范围,javac 添加 强制转换,否则报错 3.若右册 含有 变量 而不是直接使用常量相加,编译报错 例子 pub ...

  3. Scrapy定制起始请求

    Scrapy引擎来爬虫中取起始的URL 1.调用start_requests方法(父类),并获取返回值 2.将放回值变成迭代器,通过iter() 3.执行__next__()方法取值 4.把返回值全部 ...

  4. (转) fuzzing XSS filter

    //转自isno在wooyun知识库所写 题记:这是09年自己写的总结文章,之后多年也不搞这个了,技术显然是过时了,但我觉得思路还是有用的,算抛砖引玉吧,各位见笑 0x00 前言 这是一篇学习总结,首 ...

  5. 机器学习-MNIST数据集使用二分类

    一.二分类训练MNIST数据集练习 %matplotlib inlineimport matplotlibimport numpy as npimport matplotlib.pyplot as p ...

  6. octave在win上和linux上配置syms

    octave是类似matlab的一个科学计算工具集.需要用到积分.微分.求导的时候,需要连接python3的sympy. windows上先安装好python3,然后pip安装Sympy.具体过程: ...

  7. ASENET MVC 5 with Bootstrap and Knockout.js 第一弹

     A Basic Example Now that the Knockout library is installed, let’s get right to an example of using ...

  8. ①CM+CDH6.2.0安装(全网最全)

    CM+CDH6.2.0环境准备 一 虚拟机及CentOs7配置 CentOS下载地址 master(16g+80g+2cpu+2核)+2台slave(8g+60g+2cpu+2核) 1.1 打开&qu ...

  9. GIMP(Linux下的Photoshop)，Centos7下安装过程

    点当然是上官网:https://www.gimp.org/ 这英语看不懂,果断用谷歌的网页翻译. 点下载,就会有 看到这个,就点 下载一个安装的包 用命令行打上 [root@localhost 下载] ...

  10. Spring Cache 抽象(缓存抽象) Redis 缓存

        积少成多 ----  仅以此致敬和我一样在慢慢前进的人儿 相关内容: https://blog.51cto.com/14230003/2369413?source=dra           ...