搜索
首页web前端css教程让div撑满整个屏幕的方法(css)

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

May 09, 2018 am 11:41 AM
css方法

这篇文章主要介绍了关于让div撑满整个屏幕的方法(css),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

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

1.给p设置定位。

  复习一下——

  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的宽高来让p充满屏幕

 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>

以上就是本篇文章的全部内容了,更多相关内容请关注PHP中文网。


以上是让div撑满整个屏幕的方法(css)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Indieweb和网络企业Indieweb和网络企业Apr 19, 2025 am 11:16 AM

Indieweb是一回事!他们将举行会议和一切。纽约客甚至在写这件事:

(开发人员)增长模型(开发人员)增长模型Apr 19, 2025 am 11:08 AM

我真的很喜欢Dennis Hambeukers的帖子“设计师的成长模式”。丹尼斯只是发明了这种模型,但它基于一些现有想法,这一切

闹鬼:Web组件的挂钩闹鬼:Web组件的挂钩Apr 19, 2025 am 11:06 AM

我只是和戴夫聊天,他告诉我关于鬼魂的聊天。它的钩子,但适用于本机Web组件!很酷。我认为这样的东西存在

每周平台新闻:活动时机,网络的Google Earth,不死会话cookie每周平台新闻:活动时机,网络的Google Earth,不死会话cookieApr 19, 2025 am 10:57 AM

在本周的新闻中,Wikipedia有助于识别三个慢单击处理程序,Google Earth登上了网络,CSS中的SVG属性获得了更多的支持,以及在僵尸cookie的情况下该怎么做。

纯CSS的多线截断纯CSS的多线截断Apr 19, 2025 am 10:50 AM

本文中的诀窍仍然非常整洁又聪明,但是现在有一种标准化的方法可以做到这一点,这可能是您最好的选择。

CSS动画库CSS动画库Apr 19, 2025 am 10:46 AM

有很多库希望帮助您在网络上进行动画操作。这些是真正帮助您使用语法或的图书馆

颜色输入:深入研究跨浏览器差异颜色输入:深入研究跨浏览器差异Apr 19, 2025 am 10:40 AM

在本文中,我们将查看内部元素内部的结构,浏览器不一致,为什么它们在某个浏览器中以某种方式看起来

将(伪)元素限制到其父元的边框框将(伪)元素限制到其父元的边框框Apr 19, 2025 am 10:39 AM

您是否曾经想确保(伪)元素在其父框架之外没有显示任何内容?如果您在想象什么

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境