两个div：左侧应该是固定宽度，右侧应填充剩余空间。

Question

两个div：左侧应该是固定宽度，右侧应填充剩余空间。

19

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

- CluelessAboutCSS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben · Accepted Answer

这是你的代码应用该链接后的结果：

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>