0
好的，我知道类似的问题已经被问到，但是我通过谷歌搜索和贯穿几乎所有的stackoverflow问题的groveling还没有帮助我这个。我需要一个容器div，其中包含一个或两个列。内容正在通过CMS进行填充，可能包含也可能不包含这两列。2列流体宽度与100％的高度？
如果存在左栏，则左栏将为导航栏，右栏为主体副本。所以，如果没有包含导航栏，右列应该占据容器宽度的100％。如果导航栏存在，则需要在左侧吃掉200px，并将正确的主要内容推过来占据剩余的宽度。
如果左侧导航栏存在，我遇到的问题是在左侧导航栏上获得高度为100％。
我希望这是有道理的。
期望的结果是在这里：（既然不能发表图片尚未）
http://www.freeimagehosting.net/uploads/60a01995ae.gif
和当左NAV未插入，这里：
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做，但我真的想找到一个纯粹的解决方案。这不可能吗？
人们会认为浮动divs和应用100％的高度可能有效，但显然不是。
为了确保我能理解你，我做了以下工作：但它没有工作.... – W3bGuy
这工作完美后，我删除了浮动和定位。谢谢！！！ – W3bGuy
对，我忘了那部分，很高兴它适合你:-) – jeroen