如何使一个div背景在不同分辨率情况下都能全高度显示

最新推荐文章于 2020-03-10 19:28:42 发布
最新推荐文章于 2020-03-10 19:28:42 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuizhu/article/details/786355
版权
在body里设置heigh=100% 然后在div里设置heigh=100%，问题就是如此简单，呵呵，用JS可有点麻烦了
生姜有味
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar
06-06
标题中的"div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决"就直指这个常见的前端开发问题。 首先，让我们深入理解一下`div`元素的背景图片设置。在CSS中，我们可以使用`background-image`属性来...
div css网页适应不同分辨率技巧
09-27
网页适应不同分辨率技巧是网页设计中的重要一环，尤其是在跨平台和多设备浏览的时代。本文主要探讨了如何利用`div`和`CSS`在IE6浏览器中实现网页布局的适应性，尤其是考虑到浏览器的默认滚动条对布局的影响。 首先...
设置宽高适应不同的分辨率
轩辕剑的专栏
03-15 394
留念    DisplayMetrics dm = new DisplayMetrics();   getWindowManager().getDefaultDisplay().getMetrics(dm);   float densityDpi = dm.densityDpi; // 屏幕密度DPI（120 / 160 / 240）   scaleDpi = (float) densi
两个并排的DIV 左面一个的width=175 右面的那个DIV如何自适应不同分辨率填充满屏幕
北风的专栏
02-10 1197
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档html,body{margin:0;padding:0;color:#FFF;}abc这里放N多的内容。这里放N多的内容。这里放N多的内容。这里放N多的内容。这里放N多的内容。这里放N多的内容。这里放N多的内
让div的背景图片适应各种显示屏的分辨率
weixin_34174322的博客
06-05 388
平时我们做网站都是980或者960或者1000等的布局，版心很少有超过1000.我现在做的网站版心为1040，因为在1024的分辨率下会出现问题。现在就背景图问题跟大家分享一下。一般网站我们都会把需要全屏的背景图给body,这样很容易让它适应各个浏览器和各个显示屏的分辨率。当网站的背景图不是一整张的时候，head或者content部分一个背景图，而bottom部分一个背景图，...
不同分辨率调整div高度
java_trainee的博客
10-20 2069
不同分辨率调整div高度问题在做easyui 表格页面时,一般是页面上半部分为搜索框部分,有时候由于搜索条件很多,在分辨率下正常的显示成一排,但在低分辨率下,搜索框区域会出现滚动条,而且你设置了不出现滚动条时,则有一部分搜索条件会被隐藏(-.-|最大可能是搜索和重置按钮被隐藏).ps:这里我没使用table布局,因为table定的太死了,遇到一些极端的问题,变形太严重而且还不好解决,所以我的搜索区域
大图片根据分辨率自适应宽度仍居中显示
09-25
在网页设计中，确保大图片在不同分辨率下能够自适应宽度并保持居中显示是一项重要的任务。这涉及到对网页布局、图片处理和CSS样式规则的深入理解。以下是一个详细的解决方案，以及相关的知识点。 首先，我们要解决...
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
10-27
这种方法可以确保在各种屏幕尺寸下，网页都能呈现出良好的视觉效果。 首先，我们来看一下提供的示例代码。在这个例子中，HTML文档引用了一个CSS文件`c1.css`，并使用JavaScript来动态更改这个引用。当用户浏览器的...
学习DIV+CSS网页布局之一列布局
09-24
在这个例子中，我们创建了三个`<div>`元素，分别代表页头、主体内容和页脚，并通过CSS设置了它们的宽度、高度、背景颜色和对齐方式。值得注意的是，为了让整个布局居中显示，`#main`的宽度被设定为固定值，并通过`...
在不同分辨率下用js获取div的高度
lqijlyy的博客
03-02 2650
对于在不同分辨率下对于div设置固定的宽高，显然是很不适合的，当页面的分辨率发生改变后，你所用的固定宽高的div就不会随着屏幕的变化而发生改变，今天就在不同屏幕分辨率下，如何利用百分比和js设置div的宽高。直接上代码：   html代码：这里很简单： div class="fr_lr" id = "div_rh"> div class="fr_lrt" id="div_rht">
三个div元素在同一行靠右排列
热门推荐
Web魔法师
02-06 2万+
首先，定义一个大的div包括这三个div，这个大的div属性设置 然后，把左边和中间的div设置为，把最右边的div设置成： 经过上面设置，即可把三个div排列在同一行。 源代码如下：                         创建任务             创建版本任务             创建其他任务                  
如何实现一个在一个DIV中完整显示背景图。
weixin_43627723的博客
03-10 1492
.main{ margin: 0 auto; background: url('photo.jpg') no-repeat; background-size:100% 100%; width: 1000px; height: 1000px; } 暂时只知道这一种有效的方法。
CSS实现背景图自适应屏幕分辨率宽高（笔记）
cuoban的学习空间
11-06 7502
很多人会问到怎么让网页的背景图片自适应屏幕高宽度，因为很多时候如果网页背景图片没有设置自适应的话，在不同分辨率的屏幕上显示的背景会有所不同，分辨率小的时候显示不全，分辨率大的时候又会留有空白，我又不想用小图片平铺满屏幕，那么该如何解决这个棘手的问题？当然用css的background-size就可以了，既简单又实用。用法举例： body{  background:url(http://ww
css根据分辨率显示不同的css
liukai6的博客
04-16 1万+
css判断不同分辨率显示不同宽度布局实现自适应宽度 CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。 随着发展，越来越多的电脑用户显示屏分辨率越来越高，但有的用户还是使用10...
html静态网页屏幕分辨率固定
最新发布
12-29
HTML静态网页的屏幕分辨率通常是不固定的。HTML是一种标记语言，用于描述网页的结构和内容，而不涉及具体的屏幕分辨率。网页的布局和元素的位置可以通过CSS样式表来控制，以适应不同的屏幕分辨率和设备。 通过使用CSS的响应式设计技术，可以使网页在不同的屏幕分辨率下自适应布局。响应式设计可以根据屏幕的宽度和高度，动态地调整网页的布局和元素的大小，以适应不同的设备，如桌面电脑、平板电脑和手机等。 在CSS中，可以使用媒体查询（media queries）来根据屏幕分辨率的不同应用不同的样式。媒体查询可以根据屏幕的宽度、高度、方向和像素密度等属性来选择不同的样式规则。 以下是一个示例，演示了如何使用媒体查询来适应不同的屏幕分辨率： ```html <!DOCTYPE html> <html> <head> <style> /* 默认样式 */ .container { width: 100%; height: 200px; background-color: red; } /* 在屏幕宽度小于600px时应用的样式 */ @media (max-width: 600px) { .container { background-color: blue; } } /* 在屏幕宽度大于1200px时应用的样式 */ @media (min-width: 1200px) { .container { background-color: green; } } </style> </head> <body> <div class="container"></div> </body> </html> ``` 在上面的示例中，`.container`元素的背景颜色在不同的屏幕宽度下会发生变化。当屏幕宽度小于600px时，背景颜色为蓝色；当屏幕宽度大于1200px时，背景颜色为绿色；其他情况下背景颜色为红色。 通过使用媒体查询和其他CSS技术，可以实现网页在不同屏幕分辨率下的自适应布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值