如何定义css样式,让背景色的高度随页面高度而定
<body>
<div id="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div id="footer"></div>
</body>
存在的问题:
中间部分的内容高,而我在左右div里设了背景色,但由于高度没有中间部分那么高,所以左右两边距底部版权之间没有背景色,而是以白色显示!
怎么做能让白色部分也显示为背景色,如何解决这个问题!谢谢了! 展开
有两种办法可以实现这个功能:
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
注意:一般实际开发过程中一般是不设置高度为具体的值的,一般是设置高度随着内容的多少而改变。
这种动态的还是用jquery吧。。。
$("最外面的div").css("height",$(document).height());
2015-05-21 · 知道合伙人软件行家
知道合伙人软件行家
向TA提问 私信TA
2.CSS三栏自适应高度。搜索一下,有很多资源说明的,大概思想就是margin一个很大负值,然后padding一个一样大的正值。
2015-07-06 · 知道合伙人软件行家
1.你做个三栏颜色的背景图片,截取一条做页面背景,和你的三栏位置对应,Y轴重复(repeat-y);
2.CSS三栏自适应高度。搜索一下,有很多资源说明的,大概思想就是margin一个很大负值,然后padding一个一样大的正值。
2、用js或jquery手动获取中间模块的高度,将值赋给左右两部分,这种三者高度同步,虽然麻烦一些,但是这种方法还是比较好用的。