如何让身高：“100％”在CSS中跨浏览器工作？


    <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>

你可以也使用此示例设置宽度。随意重复使用我的库，但请在代码中注明它的来源。

来源

2010-01-04 21:55:15 DoctorLouie

我喜欢这个。我也会使用它+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%; 
}

来源

2010-01-04 22:32:15

尝试此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>

问候说

来源

2010-01-05 00:21:00 Said

要么你不明白的OP或我的浏览器坏掉。 – BalusC 2010-01-05 01:48:30

我误解/误读了这个问题！ JS应该解决这个问题 – Said 2010-01-05 02:01:36

如何让身高：“100％”在CSS中跨浏览器工作？

回答

相关问题