Semi Fluid Layout CSS/Html

问题

I have a two column layout in which I have a static width for the right column of 350px, and for the left column the width should be such that it fills the rest of the page. Or at least that is what I want to happen, but unfortunately it's not.

Here's a look at my css/html: http://jsfiddle.net/CmJ7P/. Any help you could offer on how to make this happen would be greatly appreciated.

Edit: I'd prefer a solution in IE6 if you can

回答1:

You need to remove the float from the left column and put the right floated column first in the HTML:

.wrapper {
  display: block;
}

.wrapper div.content {
  background-color: #ccc;
}

.wrapper div.sidebar {
  display: block;
  background-color: blue;
  float: right;
  width: 320px;
  height: 400px;
  padding: 0 20px;
}

html, body {
  padding: 0;
  margin: 0;
}

<div class="wrapper">
  <div class="sidebar" style="width: 350px">
    <div style="margin-top: 15px;">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
    <div class="sidebarpanel">
    </div>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed elementum libero. Morbi aliquam, nunc a ullamcorper eleifend, dui ante cursus odio, ac lacinia arcu neque vitae dui. In et ipsum orci. Donec laoreet imperdiet augue non sodales.
      Phasellus vel elit sit amet est mattis euismod. Duis non turpis eget ligula gravida mattis eget vitae turpis. Nunc vulputate lacinia posuere. Quisque nec feugiat quam. Praesent facilisis pulvinar tortor, sit amet fringilla nisl imperdiet at. In
      pulvinar dignissim dignissim.
    </p>
  </div>
</div>

回答2:

I know some would advise against this, but I think the best way to accomplish this would be with frames. Something like:

<frameset cols="*,350px">
  <frame src="a.html" />
  <frame src="b.html" />
</frameset>

This would create two frames, left and right. The left would take up the entire page minus 350px.

Alternatively, you could use javascript to get the width of the entire document, subtract 350 from the total and bind a window resize event to update the width of your 'fluid' element (the one that takes up the rest of the page). jQuery would make this pretty easy. I'm not too sure about browser compatibility though.

来源：https://stackoverflow.com/questions/5587122/semi-fluid-layout-css-html

标签

html

css

fluid-layout