好的，我知道有类似的问题已被问到，但是我通过谷歌搜索和浏览几乎所有的stackoverflow问题，并没有帮助我解决这个问题。我需要一个容器div，它在其中包含一个或两个列。内容通过CMS填充，可能包含也可能不包含两列。
左栏将是导航栏（如果存在），而右栏将是主要副本。因此，如果没有包含导航，则右列应占据容器宽度的100％。如果导航轨道存在，那么它需要吃掉左侧的200px，并将右侧主要内容推过去占据剩余的宽度。
如果左侧导航栏存在，我遇到的问题是左侧导航栏的高度超过100％。
我希望这是有道理的。
期望的结果在这里:(因为我还不能发布图像）
http://www.freeimagehosting.net/uploads/60a01995ae.gif
当未插入左侧导航时，此处：
http://www.freeimagehosting.net/uploads/be5b69e9ec.gif
我通过指定右边的宽度来消耗200px左列留下的剩余宽度。
#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#left-col {
float: left;
width: 188px;
background-color: #d7d7d7;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 722px;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
<body>
<div id="container">
<div id="left-col">
<p>Left Rail Nav</p>
</div>
<div id="right-col">
<p>Primary content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
如果我想在不包含左侧导航的情况下将右列的宽度保持为100％，则会出现此问题。当我向右边的内容添加100％的宽度时，它会将其放到底部。
更改右栏宽：
#right-col {
float: left;
width: 100%;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
像这样：http://www.freeimagehosting.net/uploads/fef22741e7.gif
我必须相信这有一种纯粹的CSS样式。我知道我可以用一些javascript来做，但我真的想找到一个纯粹的解决方案。这不可能吗？
有人会认为浮动div并应用100％的高度可能有效，但显然不行。
答案 0 :(得分：1)
问题的一个可能解决方案是给两列display: table-cell并从右列中删除宽度（以及两者的边距和填充）。
问题在于它与旧版本的IE不兼容。
答案 1 :(得分：1)
我想我会扩展这个来阐述@jeroen给出的答案。再次感谢@jeroen。
在IE以外的所有浏览器中获得所需结果的CSS是使用@jeroen提到的display: table-cell;。
这将上面的CSS改为：
#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#left-col {
width: 188px;
display: table-cell;
background-color: #d7d7d7;
}
#right-col {
display: table-cell;
background-color: red;
}
HTML保持不变：
<body>
<div id="container">
<div id="left-col">
<p>Left Rail Nav</p>
</div>
<div id="right-col">
<p>Primary content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
为了让它在所有浏览器中正确播放并且看起来正确，我必须在IE异常中添加以下内容：
<!--[if IE]>
<style type="text/css">
#left-col { display: block; float: left; width: 188px; }
#right-col { display: block; float: left; }
</style>
<![endif]-->
这完全适用于我所追求的内容并允许我动态提供内容，而不用担心使用javascript（jQuery）我喜欢的post doc加载DOM操作，但我真的想要一个更清洁的方法来应用这个应用程序。我希望这也可以帮助其他人。
答案 2 :(得分：0)
类似：html, body, #container, #left-col, #right-col { height: 100%; }应该有用。