混合固定PX siderbar和基于百分比的内容

Question

尝试创建新的布局，但遇到了问题。

目前，我有一个固定的侧边栏在左边，然后内容漂浮在右边。

侧边栏的宽度为18%，然后其他内容的宽度为82%。

这很好用，但它看起来很丑陋，在较大的屏幕尺寸下不稳定。

然而，我希望做出一些改变，使侧边栏具有固定的宽度。这就在其他内容上提出了一个问题，我想要占据房间的其余部分。

我如何才能让内容放在右边，在保留固定侧边栏的同时，仍然占据房间的其余部分？

希望这是有意义的！

以下是我面临的问题的js小提琴：

http://jsfiddle.net/Uyv6w/

我现在做的是：

http://jsfiddle.net/Uyv6w/1/

布局是这样的：

<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div id="inner"></div>
    </div
</div>

Answer 1

我想我不太确定你在找什么--但是我试过用这个FIDDLE。

我将主要的div向左浮动，然后给容器一个最小宽度和最大宽度。

你能提供更多的细节吗？

CSS

html, body {
    width: 100%;
    height: 100%;
    background-color: #333;
}
#container {
    height: 100%;
    min-width: 600px;
    max-width: 1200px;
}
#sidebar {
    float: left;
    height: 100%;
    width: 100px;
    background-color: #9b59b6;
}
#content {
    float: left;
    width: 82%;
    background-color: red;
  overflow: hidden;}
#inner {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: gray;
    height: 1000px;
    padding: 10px;
}
img {
  display: block;
    width: 300px;
    margin: 20px auto;
}