Question

我有2个通过浮动实现的列。使用CSS时，它们不会伸展到100％。我如何实现这一目标？

Answer 1

我对此做了一些研究，并且没有办法直观地进行css。有一些方法可以通过使用短柱后面的图像向下重复来美化美学。

其他方式是使用javascript，如果我找到这些帖子，我会更新。

http://www.thechoppr.com/blog/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar/

Answer 2

尝试将该列及其所有包含元素（包括body和html）的min-height设置为100％。 see here

编辑：我听说这在ie8中不起作用，但我已经测试了它看起来没问题，

Answer 3

#columns {
    height:100%;
}

css和height的问题在于它在浏览器中不一致。你最好不要担心身高。您还有不同屏幕分辨率的问题。

如果身高非常重要，我会用JavaScript解决它。

Answer 4

这应该可以解决问题：


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

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

Answer 5

要使用CSS达到100％的高度，您必须确保封闭块也设置为高度：100％;包括<html>元素。

html, body
{
    height: 100%;
}

#YourBlock
{
    height: 100%;
}

Answer 6

试试这个css＆amp; HTML，测试和工作在FFx 3.5，IE 8＆amp; 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>

此致说

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

6 个答案: