Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
832 views
in Technique[技术] by (71.8m points)

css - Two divs; left should be fixed width, right should fill rest of space

I've got the following HTML code:

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

What I'm trying to do is make it so that #Panel is of a fixed width (~200 pixels) and on the left hand side, and that #Content is immediately to the right of #Panel but is of "dynamic" width and fills the rest of the space in the browser screen horizontally. I've tried a lot of different things but haven't been able to get it working -- the farthest I've gotten is to the point where #Panel is on the left and #Content is to the right of #Panel and fills of the rest of the space, but #Content starts below #Panel whereas I'd like it to start at the same vertical position.

I did find In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?, however I wasn't able to apply it to the HTML above.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Here's that link, applied to your code:

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

Works pretty well! Although, IMHO, you don't need the frame or body (but I don't know the master plan). That would look like this:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...