我有2列是通过浮动实现的。使用css时,它们不会达到100%。我如何实现这一目标?如何让身高:“100%”在CSS中跨浏览器工作?
回答
我做了一些这方面的研究,并没有办法直接在css中做。通过使用短列后面的图像向下重复,可以通过欺骗美学等方法来实现。
其他方式是使用JavaScript,如果我找到这些帖子,我会更新此。
http://www.thechoppr.com/blog/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar/
#columns {
height:100%;
}
CSS和高度的问题是,它不是跨浏览器一致。你最好不要担心身高。你也有不同的屏幕分辨率的问题。
如果身高真的很重要,我会用JavaScript解决它。
尝试将该列及其所有包含元素(包括body和html)的最小高度设置为100%。 see here
编辑:我听说,这将不会在IE8中工作,但我测试过它,它看起来不错,
这应该做的伎俩:
<script language="Javascript" src="http://i.ngen-io.us/core/js/b4dom.js"></script>
<script language="Javascript">
var currHeight = document.body.clientHeight;
document.getElementById("MyColumnDiv").style.height = ''.currHeight.'px';
</script>
你可以也使用此示例设置宽度。随意重复使用我的库,但请在代码中注明它的来源。
我喜欢这个。我也会使用它+1。 – 2010-01-04 22:04:43
这在所有浏览器中都不一致。看到这个SO回答(http://stackoverflow.com/questions/833699/clientheight-clientwidth-returning-different-values-on-different-browsers) – Mottie 2010-01-04 22:16:43
这是一致的,如果你使用我的图书馆,否则不会,它不会是一致的。 – DoctorLouie 2010-01-04 22:17:53
要使用CSS达到100%的高度,您必须确保封闭块也设置为高度:100%;包括<html>
元素。
html, body
{
height: 100%;
}
#YourBlock
{
height: 100%;
}
尝试此CSS & HTML,测试并在3.5 FFX,IE 8 & Safari 4的工作的 - 通过将背景颜色的#container在IE7作品部分。
<style type="text/css" media="screen">
#container { width:800px; margin:25px auto; position:relative;display:block;overflow: hidden;}
#header { height: 80px;background: #eee; }
#wrapper { float:left;width:100%}
#col2 { margin:0 200px;background: #ddd; }
#col1 { float:left; width:200px; margin-left:-800px; background: #eee; }
#col3 { float:left; width:200px; margin-left:-200px; background: #ccc; }
#col1, #col2, #col3 { padding-bottom:32767px!important; margin-bottom:-32767px!important; }
#footer { clear:both; background: #aaa; padding:10px;height: 20px;}
* > #footer { position:relative; z-index:20; }
</style>
使用这个HTML结构
<div id="container">
<div id="header"></div>
<div id="wrapper">
<div id="col2"></div>
</div>
<div id="col1"></div>
<div id="col3"></div>
<div id="footer"></div>
</div>
问候 说
- 1. 如何让我的iPhone浏览器达到身高:100%?
- 2. 手机CSS高度100%+浏览器chrome?
- 3. 使可变高度td高度的div:100%跨浏览器工作
- 4. 身高:100%css无法正常工作
- 5. 跨浏览器css
- 6. 跨浏览器CSS
- 7. 跨浏览器CSS
- 8. CSS跨浏览器居中
- 9. CSS 100%高度不工作,但身体是100%高度?
- 10. CSS - 身高:100%vs最小身高:100%;
- 11. CSS跨浏览器过滤器模糊不工作在Firefox
- 12. 如何用CSS调整100%的浏览器高度和宽度?
- 13. 跨浏览器的CSS工具
- 14. 100%身高无法正常工作 - 身高只有浏览器窗口的高度,而不是内容
- 15. 身高超过浏览器高度的100%
- 16. 身高:100%相匹配的浏览器的高度
- 17. 调整浏览器大小时,身高100%无法正常工作
- 18. 在Chrome浏览器(火狐浏览器和IE浏览器都在工作)中jQuery CSS div高度不匹配
- 19. 网页跨浏览器CSS
- 20. Css跨浏览器代码
- 21. DOM CSS跨浏览器库
- 22. CSS跨浏览器问题
- 23. 跨浏览器CSS问题
- 24. 跨浏览器的css
- 25. CSS渐变跨浏览器
- 26. 关于跨浏览器css
- 27. 跨浏览器全宽CSS
- 28. 如何让桌子在Mozilla浏览器中达到100%的高度?
- 29. 身高:100%适用于Chrome浏览器,但不适用于Safari浏览器
- 30. CSS过滤器无法正常工作跨浏览器
你不能。我一直试图做到这一点 - 没有跨浏览器的方式。 – 2010-01-05 00:58:16