Html 我怎样才能确定高度：“我怎么能确定高度？”；“100%”；在CSS中跨浏览器工作？

我有两列是通过浮动实现的。使用css时，它们不会拉伸到100%。我是如何做到这一点的？

我对此做了一些研究，但凭直觉无法做到这一点。有一些方法，例如通过在短柱后面使用图像向下重复来欺骗美学

另一种方法是使用javascript，如果我找到这些帖子，我会更新它

css和高度的问题在于它在不同浏览器之间不一致。你最好不要担心身高。你也有不同屏幕分辨率的问题

---

如果高度真的很重要，我会用JavaScript解决它。

尝试将该列及其所有包含元素（包括正文和html）的最小高度设置为100%

---

编辑：我听说这在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>

var currHeight=document.body.clientHeight；
document.getElementById（“MyColumnDiv”）.style.height='.currHeight.px'；

---

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

要使用CSS实现100%的高度，您必须确保封闭块也设置为高度：100%；包括

元素

html, body
{
    height: 100%;
}

#YourBlock
{
    height: 100%;
}

---

试试这个css和html，在FFx 3.5、IE 8和Safari 4中测试并运行-在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>

#容器{宽度：800px；边距：25px自动；位置：相对；显示：块；溢出：隐藏；}
#标题{高度：80px；背景：#eee；}
#包装{浮动：左；宽度：100%}
#col2{margin:00200px；背景：#ddd；}
#col1{float:left；宽度：200px；左边距：-800px；背景：#eee；}
#col3{浮点：左；宽度：200px；左边距：-200px；背景：#ccc；}
#col1，#col2，#col3{填充底部：32767px！重要；边距底部：-32767px！重要；}
#页脚{清除：两个；背景：#aaa；填充：10px；高度：20px；}
*>#页脚{位置：相对；z索引：20；}

使用此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。这在所有浏览器中都不一致。看到这个答案（）如果你使用我的库，它是一致的，否则不，它将是不一致的。顺便说一句：在Firefox、Opera、MSIE 5+、Safari、Chrome上测试，即使在blackberry、iPhone和Ubuntu、Fedora和Redhat Linux（使用Firefox）上也能完美地工作。这个家伙搜索CSS解决方案，而不是javascript解决方案你不能。我一直在尝试这样做-没有跨浏览器的方式。要么你不理解OP，要么我的浏览器坏了。我误解/误读了这个问题！JS应该解决这个问题

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