电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

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

2020-08-21 21:17:05 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要概述了关于让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中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152
备案号:苏ICP备19057673号-2