css 中如何设置div的宽度与网页宽度一样呀？[解决就结贴]

2008-04-16 02:34:12 4.7k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

手机网页示例1——通过CSS的宽度百分比设置达到页面自适应效果手机网页与传统PC网页存在很大区别的一点在于页面展示。 PC网页在布局方面常常会在两边“留白”——比如把网页的主要内容居中，然后两边通常不做布置（只是显示背景）。这是因为PC屏幕大，屏幕能显示的内容多，网页设计者当然可以把需要展示的内容仅仅放到页面中间就基本足够了，而且这样还能够让页面显得美观、整洁。而对于手机网页，手机屏幕的尺寸本来就比较小。所以通常手机网页的布局都不会在页面两边留白。设计阅读详情

想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时会发现左边一块地方并没有被背景层所填充。

现在急求解决办法！

...全文

stg609

.NET社区 62,271 成员 668,968 内容

+ 关注 + 加入社区

切换为时间正序

StopCry 2009-12-27

打赏
举报

为何要把背景颜色单独放在一个层里？直接放在body里就可以撒，背景颜色和背景图可以同时设定

xiangqianbo 2009-08-09

打赏
举报

学习...

爱优优 2009-08-09

打赏
举报

今天路过，搜索了一下自己回过的帖子，竟然还有人回复1年前的帖子，感动啊...

madshime 2009-04-11

打赏
举报

回帖是一种美德！每天回帖即可获得 10 分可用分！

Solutioned 2008-04-27

打赏
举报

min-width:网页宽度

luzhide2008 2008-04-17

打赏
举报

没遇到过这样的问题

chuxue1342 2008-04-17

打赏
举报

接分了!

changjiangzhibin 2008-04-17

打赏
举报

mark

voice007 2008-04-16

打赏
举报

mark!

stg609 2008-04-16

打赏
举报

谢谢大家的帮助，问题基本解决。

stg609 2008-04-16

打赏
举报

谢谢　bjy3199 的建议，但是我真正想实现的效果并不只是这样，除了在头部有一个随浏览器自动调整的背景，在页面的底部也希望实现一个自动调整的背景。
如果使用body的background-color或background-image就只能实现一种背景颜色，或图片了。

爱优优 2008-04-16

打赏
举报

[Quote=引用楼主 stg609 的帖子:]
想通过层的重叠来添加背景，希望能根据浏览器和网页的大小自动调整这个背景层。
#HeadBg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px 0px 0px 0px;
height: 80px;
background-color: Gray;
}
以上是我自己的代码，但是这个只能实现根据浏览器的大小自动适应宽度，如果出现横向滚动条，那么当移动滚动条时，就会发现这个背景层的宽度其实只等于浏览器的宽度，所以当滚动条移动时…
[/Quote]

另外，添加背景，不用楼主这样的麻烦。body 对象，或指定的层(div)都有 background 这个样式属性，照我上面的例子，全部可以控制。

爱优优 2008-04-16

打赏
举报

试试这个样式：

body {
background-attachment: fixed;
background-color: #FFF; /* 这里设置背景颜色 */
background-repeat: repeat-x; /* 控制背景图片重复方向*/
background-position: center bottom;
background-image: url(../images/bg.gif); /* 在这里添加背景图片，可以自动扩展 */

}

上面是所有页面的背景设置。你可以修改为指定的层的样式，让图片自动覆盖指定层区域，应用可以达到你的目的。

WH514081671 2008-04-16

打赏
举报

[Quote=引用 34 楼 WH514081671 的回复:]
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）
[/Quote]
刚刚打错了
window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.height ，window.screen.width就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）

WH514081671 2008-04-16

打赏
举报

window.screen.availHeight是由很多数据出现滚动条时用的
如果只是浏览器大小，用这个window.screen.availWidth ，window.screen.availWidth就行
最好是宽度和高度在减点，宽度减20px（大约滚动条的宽度）就行了，高度减125px左右（IE HeightBAR）

stg609 2008-04-16

打赏
举报

行了，终于调出来了。
找到两个原因
第一、放在<head></head>之间，找不到这个id,所以我把它放到HeadBg中去了。
第二，style.Width无法识别，只能识别小写。
郁闷，要求这么严格。
不过你这个虽然可以实现效果，但是有了另一个问题，就是长度太长了，远远超过了970px.不知道是怎么回事

WH514081671 2008-04-16

打赏
举报

我这里确实没问题，我用的是2003，在用这个试试吧，在不好用，我也无能为力了
document.getElementById("HeadBg").style.width=window.screen.availWidth
document.getElementById("HeadBg").style.height=window.screen.availHeight

mylibin 2008-04-16

打赏
举报

没遇到

stg609 2008-04-16

打赏
举报

是不是这个脚本语法有问题呀？
我改成：document.all.HeadBg.style.Height = "1000px";
或document.all.HeadBg.style.Height = 1000px;
都没反应的。

WH514081671 2008-04-16

打赏
举报

在脚本里把宽度和高度设置成屏幕可活动的宽度和高度，没道理不好用
document.all.HeadBg .style.Width=window.screen.availWidth
document.all.HeadBg .style.Height=window.screen.availHeight

加载更多回复（28）

css 中如何设置div的宽度与网页宽度一样呀？[解决就结贴]

相关推荐