如何定义css样式,让背景色的高度随页面高度而定

我的框架:<body><divid="main"><divclass="left"></div><divclass="center"></div><divclass="r... 我的框架:
<body>
<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div id="footer"></div>
</body>
存在的问题:
中间部分的内容高,而我在左右div里设了背景色,但由于高度没有中间部分那么高,所以左右两边距底部版权之间没有背景色,而是以白色显示!
怎么做能让白色部分也显示为背景色,如何解决这个问题!谢谢了!
展开
 我来答
码农小明哥
2015-12-27 · 互联网程序员一枚,欢迎交流
码农小明哥
采纳数:9602 获赞数:25062

向TA提问 私信TA
展开全部

有两种办法可以实现这个功能:

1、采用设置高度的值为百分比,如

height:100%;

此时高度就会随着父元素的高度二改变。

2、采用使用js获取页面的高度来实现高度的动态变化

如获取:页可见区域高: document.body.clientHeight

然后获取该样式高度后设置该高度为以上值。补充:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth


注意:一般实际开发过程中一般是不设置高度为具体的值的,一般是设置高度随着内容的多少而改变。

ztw1122
2015-07-14 · TA获得超过1088个赞
知道小有建树答主
回答量:2382
采纳率:80%
帮助的人:944万
展开全部

这种动态的还是用jquery吧。。。

$("最外面的div").css("height",$(document).height());
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yfcp
2015-05-21 · 知道合伙人软件行家
yfcp
知道合伙人软件行家
采纳数:1748 获赞数:5545
有多年网站建设相关工作经验。熟悉ASP、ASP.net、VB、JavaScript、HTML等语言和CSS、Ajax等相关技术。

向TA提问 私信TA
展开全部
1.你做个三栏颜色的背景图片,截取一条做页面背景,和你的三栏位置对应,Y轴重复(repeat-y);
2.CSS三栏自适应高度。搜索一下,有很多资源说明的,大概思想就是margin一个很大负值,然后padding一个一样大的正值。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
CodeMan
2015-07-06 · 知道合伙人软件行家
CodeMan
知道合伙人软件行家
采纳数:193 获赞数:505
php开发 html mysql javascript vb

向TA提问 私信TA
展开全部
可以有几个办法解决:
1.你做个三栏颜色的背景图片,截取一条做页面背景,和你的三栏位置对应,Y轴重复(repeat-y);
2.CSS三栏自适应高度。搜索一下,有很多资源说明的,大概思想就是margin一个很大负值,然后padding一个一样大的正值。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
gongli8811
2018-02-27 · TA获得超过561个赞
知道小有建树答主
回答量:917
采纳率:67%
帮助的人:158万
展开全部
1、给左右两个模块添加固定高度,值与中间高度保持一致。这种方法虽然能实现效果,但是不灵活。
2、用js或jquery手动获取中间模块的高度,将值赋给左右两部分,这种三者高度同步,虽然麻烦一些,但是这种方法还是比较好用的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(11)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式