我有以下HTML代码：
<body>
<div id="Frame">
<div id="Body">
<div id="Panel">Side panel,fixed width.</div>
<div id="Content">The rest of the content,should be dynamic width and fill up rest of space horizontally.</div>
</div>
<div id="Foot">
<div>FooBar.</div>
</div>
</div>
</body>
我想要做的是使#Panel具有固定宽度(〜200像素)，左侧，#Content立即在#Panel的右侧，但是具有“动态”宽度并在浏览器屏幕中的其余部分水平填充。我尝试过很多不同的事情，但是却无法使其正常工作 – 我最了解的是#Panel在左边，#Content在#Panel的右边，并填写的剩余空间，但#Content从#Panel开始，而我希望它从同一个垂直位置开始。
我找到了In CSS,how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?，但是我无法将其应用到上面的HTML。
解决方法
这是链接，适用于您的代码：
CSS
#frame { background:pink }
#panel { background:orange; width:200px; float:left }
#content { background:khaki; margin-left:200px }
#foot { background:cornflowerblue }
HTML
<div id='frame'>
<div id='body'>
<div id='panel'>
Side panel,fixed width.
</div>
<div id='content'>
The rest of the content,should be dynamic width and fill up rest of space
horizontally.
</div>
</div><!-- End #body -->
<div id='foot'>
<div>FooBar.</div>
</div>
</div><!-- End #frame -->
工作相当不错！虽然IMHO，你不需要框架或身体(但我不知道总体规划)。那将是这样的：
<div id='panel'> Side panel,fixed width. </div> <div id='content'> The rest of the content,should be dynamic width and fill up rest of space horizontally. </div> <div id='foot'> <div>FooBar.</div> </div>
