CSS - 如何使100％的-height 2栏布局与未知高度

的头，我需要实现主题，真正卡住了。为了更好地描述，我已经忍了什么，我需要得到一个画面：CSS - 如何使100％的-height 2栏布局与未知高度

enter image description here

起初，我试着div s到做到这一点，但它看起来完全不同，在Firefox中，由于width属性。虽然我主要关心的是IE8非标准模式（这就是要求），但我希望它在Firefox中看起来更像或不太体面。

然后我试着做两列表，它在IE中运行良好，在Firefox中运行得很好，但由于某种原因，如果右列内容变得比屏幕更宽，表格不能容纳，而且我的内容是由桌子水平裁剪，没有显示滚动条。

而且，看着＃2较早的职位，fixed容器，但它似乎并没有在IE8非标准模式下工作。

将高兴地听到关于如何可以这样做的任何想法。

来源

2011-11-07 Andrey Balaguta

您可以为我们提供一个律位代码，你已经完成的工作是什么？ – Rito

Rito，这里是：http://pastebin.com/FuhEJj13。我用JS做了最初的100％高度，这是不好的，出于某种原因，我现在无法再现内容裁剪......我甚至试图用JS改变内容宽度（以模拟真实情况 - 网格中“测试范围”的地方），但仍然适用于这一小块，并不在一个大的页面上。 –

一个真正的页面上会出现什么情况，是最里面的'＃'content'得到td'足够宽，以适应内容（〜6000px），*但*'tr'（和'table'）被裁剪以适合屏幕宽度（1000像素〜）。 –

可能是你可以这样做：

.left{ 
    float:left; 
    position:absolute; 
    width:200px; 
    background:red; 
    border:2px solid #000; 
    top:200px; 
    bottom:0; 
    left:0; 

} 
.right{ 
    overflow:hidden; 
    background:green; 
    position:absolute; 
    top:200px; 
    bottom:0; 
    left:204px; 
    right:0; 
    border:10px solid #000; 
} 

html, body{ 
    min-height:100%; 
    height:100%; 
} 
.header{ 
    width:100%; 
    height:200px; 
    background:yellow; 
}

入住这http://jsfiddle.net/QHTeS/

来源

2011-11-07 12:19:33 sandeep

请看图片：头部的高度_not known_ –

，在左边比右边更高度（内容）不工作。 –

-1

这将有助于 - 一个非常简单的例子。

http://jsfiddle.net/pRAgY/

记住，当你知道宽度来调整合适的容器的宽度，为6像素边界（共计24像素）越过100％的宽度avalible。

来源

2011-11-07 12:21:10

请看图：1）有6px的_two_边框; 2）列应该是100％高或更多（可以增长）。 –