<!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. python的requests用法详解

    Requests是一个Python语言写的http相关设置或者请求的一个库 安装:pip install Requests或者pip3 install requests 使用的时候要import re ...

  2. NameError:name ‘xrange’ is not defined

    原因: 在Python 3中,range()与xrange()合并为range( ). 我的python版本为python3.5. 解决办法: 将xrange( )函数全部换为range( ).

  3. 16. 产生Javadoc

    过程与export >> javadoc一致,需要注意的是字符集的设置. -encoding UTF-8 -charset UTF-8 export >> javadoc : ...

  4. 网络通信-基本概念：网络、IP地址、端口、socket

    目录 网络通信 1 网络 1.1 网络定义 1.2 使用网络的目的 1.3 总结 2 IP地址 2.1 ip地址的作用 2.2 ip地址的分类 3 端口 3.1 什么是端口 3.2 端口号 3.3 端 ...

  5. 高通量计算框架HTCondor(五)——分布计算

    目录 1. 正文 1.1. 任务描述文件 1.2. 提交任务 1.3. 返回结果 2. 相关 1. 正文 1.1. 任务描述文件 前文提到过,HTCondor是通过condor_submit命令将提交 ...

  6. squeeze(s1,s2),将字符串s1中任何与字符串s2中匹配的字符都删除

    void squeeze(char a[],char b[]) { //要实现把s2的任意字符如果出现的话就在s1中删除 //1.首先判断s1[j]==s2[i]&&s1[j]=='\ ...

  7. mysq5.7l的下载与配置

    ---恢复内容开始--- mysql是一个开源免费的数据库,它属于oracle公司 下载地址:www.oracle.com 页面移动到下面可以找到这几个选项 还是移动到下面 如果你要下载的不是那四样中 ...

  8. java实现字符串翻转

    public class StringReverse { /*一共写了三个函数func1 func2 func3 * 时间: 2019年9月12日9:00 * func1用的反向输出到一个新的字符串中 ...

  9. Oracle数据库安装与卸载

    一.下载俩个压缩包,同时选中解压到一个文件夹中 二.点击step.exe(win10可能弹出不满足环境要求,选择是就行了) 三.把接收更新勾掉不需要 四.选择创建和配置数据库 五.选择服务器类 六.选 ...

  10. PyCharm2019.3.3专业版完美激活

    在 PYPL 编程语言榜单上,Python 因近几年受欢迎程不断提高而继续霸榜.俗话说“萝卜青菜,各有所爱”,在众多的编辑器当中,因每个人的使用习惯不同,也会选择各自的喜欢的编辑器.Pycharm 分 ...