两个div；左边应该是固定宽度，右边应该填充其余空间答案

【问题标题】：Two divs; left should be fixed width, right should fill rest of space两个div；左边应该是固定宽度，右边应该填充其余空间
【发布时间】：2011-05-01 00:57:36
【问题描述】：

我有以下 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 html

【解决方案1】：

这是应用于您的代码的链接：

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

效果很好！虽然，恕我直言，你不需要框架或身体（但我不知道总体规划）。看起来像这样：

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

【讨论】：

谢谢。不幸的是，无论我做什么，我都无法适应它以在我的网站上正常工作。您可以通过什么方式查看该站点并向我展示需要做什么（在 CSS 中）？ cpuforums.org
@Clueless - 看了一下，真的是一模一样。在测试 HTML 中尝试我的示例，破坏/修复一些东西，然后你就可以应用它了。而且，也许您可以在完成后更改您的用户名；）