手机端-某个div撑满整个body

最新推荐文章于 2023-07-05 17:25:56 发布
最新推荐文章于 2023-07-05 17:25:56 发布
阅读量2.9k 收藏
点赞数 1
分类专栏： HTML5 + CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guodengh/article/details/45364425
版权

才开始接触手机端，所以遇到很多琐碎的小问题，一个一个来吧！！消灭你们！

--整个项目的body背景色统一为gray，但是在某个页面要调整为white，这种情况，在整个DOM的div外围，body之下，加一个div作为全局wrapper

给这个div设定height和width是100%是不起作用的，加上绝对定位即可



<body>
<div>  加上它，并设为position:absolute
<div></div>  原本的主体内容
</div>
</body>


guodengh
关注
专栏目录
让div充满整个body
weixin_30507481的博客
03-14 2047
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
js基础知识（三十二）--事件的冒泡及div跟随鼠标移动小练习
weixin_47928499的博客
08-16 482
事件的冒泡及div跟随鼠标移动小练习
移动端设置高度占满全屏
m0_72663698的博客
07-05 344
在最外层的盒子设置css。
div占据整个body
zyzn1425077119的博客
08-21 1071
参考：GIS-MAN(张超)的博客，网址：http://www.cnblogs.com/gisbeginner/archive/2012/11/15/2771894.html       divShow.html body,html{  padding:0px;  margin:0px;  overflow:hidden; } #divShow{  position
弹框 、手机页面上body不随遮罩层上内容一起滚动
冉然的博客
06-08 455
1、弹出框时，隐藏$('body,html').css({ position: 'relative', top:'0', height:'100%', overflow: 'hidden',})2、关闭弹框时，清除样式，删除style中相应的属性$('body').css({ position: null, overflow: 'visible', hei...
移动端设置全屏，做的笔记
12-21 288
在移动端需要给div设置全屏 方法一： #map { height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px; background: #00FF00 url('map/n/n/n.png') repeat; z-index: 0...
将div铺满body三种方式
BBX__XB的博客
11-30 3326
css权威指南》指出，如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面div1height设置为任何值都跟设置没设置一样。想要令body里一个块元素（div）占全屏，相信很多人（包括我）都会直接把body设置宽高100%，但实际却是，行不通。因为body跟div一样是块元素，直接赋值给块元素height:100%，相当于就是默认值的独占一行。所以这里写body{ width:100%;}，其实是毫无作用的。优点：①简洁，②缩小浏览器，拉动滚动条也还是满屏背景。
html5手机端遮罩弹出菜单代码
11-19
HTML5手机端遮罩弹出菜单是网页设计中常见的交互元素，主要用于在移动设备上提供一个半透明的覆盖层，以此来突出显示重要的菜单或功能选项。这种设计模式能够提高用户体验，因为它允许用户在不离开当前页面的情况下...
手机网页div向下滑隐藏，向上滑显示
qq_35606790的博客
05-13 1222
testmenu .yapiskan{ height: 80px; background-color:#e74c3c; color:white; font-size:24px; width: 100%; text-align:center; transition:top .5s; } .yya{ position:fixed; left:0; top:0; } .gizle{top:-90...
手机端触摸滑动（H5+CSS3+JS+Swiper）
ChenYH0的博客
02-11 1万+
当你遇到这样一个项目，要求如下： 1. 手机端实现触摸滑动 2. 实现点击滑动 3. 在来回切换每一屏的时候 动画能够重新执行 4. 在汉堡菜单里点击某一项，实现滑动到相应的屏。（菜单页左右切换） 要实现这样一个项目，必须首先找到一个合适的框架或者称为插件，来实现手机端能够触摸滑动。这里，我主要介绍swiper。 了解swiper 1.找到demo，并引入需要的js和css
h5手机端 怎么让手机没有横向
最新发布
09-16
例如，你可以设置当屏幕宽度小于某个特定值时，强制`body`元素变为纵向布局（如`:orientation: portrait`）。 ```css @media screen and (max-width: 600px) { body { overflow-x: hidden; /* 阻止水平滚动 */ -...
vue - 移动端实现对div的拖动功能
qq_43886365的博客
05-01 2627
主要是改变定位元素的定位值来实现位置的移动；定位值 = 手指滑动中的位置 - 手指刚触摸时候的初始位置 和距离限制；
让div撑满整个屏幕的方法（css）
weixin_30631587的博客
03-06 4470
在body只有一个div的时候，可以通过这样的方式让div撑满整个屏幕。 1.给div设置定位。 　　复习一下—— 　　css中position有五种属性： 　　　　static:默认值，没有定位 　　　　absolute:绝对定位，相对于父级元素进行定位 　　　　relative:相对定位 　　　　fixed:固定定位,相对于浏览器窗口进行定位 　　　　inherit:从父元素继...
解决body下div不能撑满整个屏幕问题，而不是让高度随内容撑高
freeshu的博客
06-24 7934
不建议直接用js获取屏幕高度改css 要让div填满整个屏幕只要让父级body、html都设置为高度100%，margin和padding都为0，就能让内容div高度铺满整个屏幕。
让body、Div占满整个浏览器的窗口
热门推荐
BiuBiu_Tian(田)
08-21 6万+
让HTML标签铺满整个浏览器的窗口，让DIV标签占满整个浏览器的窗口，让父级元素占满整个浏览器的窗口
网页body,html无法铺满屏幕100%显示
程序员
06-29 7607
当我们使用手机或平板访问电脑端（pc）网页时出现下图情况，网页无法铺满屏幕100%显示，造成体验效果很不好，那么该如何做，pc端网页在手机端也能铺满屏幕100%显示呢？
移动端页面撑满屏幕宽高，css设置
dreamcarp的专栏
04-01 9205
移动端页面撑满屏幕宽高，css样式： width: 100%; height: 100%; position: absolute; top: 0;
vue怎么让div撑满整个窗口
06-11
可以使用CSS样式来实现让div撑满整个窗口。可以使用以下样式： ``` div{ height: 100vh; /*设置高度为100%的视口高度*/ width: 100%; /*设置宽度为100%*/ } ``` 其中，`vh`是指视口高度单位，相当于视口高度的百分比，`100vh`就是整个视口高度的高度值。设置`height: 100vh`可以让div的高度填满整个视口高度，设置`width: 100%`可以让div的宽度填满整个视口宽度。这样，就可以让div撑满整个窗口了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值