CSS流体两列和最小宽度

Question

我有一个两列流体布局，左侧设置为width: 40%，右侧设置为width: 60%。我希望允许用户调整浏览器大小，但是左侧必须显示300px的最小宽度。

以下是我当前使用的流体布局代码，其中包括min-width规定。然而，CSS忽略了它!它允许左侧列收缩到小于300px。

我还尝试将min-width设置为百分比，例如20%，但是CSS也会忽略这个规定。

div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0; 
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}

div#right {
background: #aaa;
position: fixed;
top: 0; 
width:60%;
right: 0;
bottom: 0;
}
​

jsFiddle全屏示例：http://jsfiddle.net/umgvR/3/embedded/result/

jsFiddle代码：http://jsfiddle.net/umgvR/3/

这是什么原因导致的？如何纠正代码？

- Andy Dwyer

---

当左侧的最小宽度达到时，右侧div应该发生什么？ - drneel

Answer 1

如果您不太依赖于固定位置，那么这应该可以满足您的需求。

在JSFiddle上查看

HTML

<div id="left">Left</div><div id="right">Right</div>

请注意元素之间缺少空格。

CSS

html, body {
  height: 100%;
}
body {
  min-width: 800px;
}
div#left {
  background: #ccc;
  display: inline-block;
  width: 40%;
  min-width:300px;
  height: 100%;
}

div#right {
  background: #aaa;
  display: inline-block;
  width:60%;
  height: 100%;
}

- jamesplease

Answer 2

这应该也可以工作...

HTML

<div id="container">
        <div id="left">Left</div>
        <div id="right">Right</div>
</div>

CSS

body, div {width:100%;
                height:100%;
                margin: 0;
            }

            #container {
                display:block;position: fixed;
            }
            #left, #right {
                display: inline-block;
            }
            div#left {
                background: #ccc;
                min-width: 300px;
                max-width: 40%;
            }

            div#right {position:fixed;
                background: #aaa;
                width: 60%;
            }

- lukeocom

Answer 3

我发现左侧的div保持了最小宽度，但是它却在右侧的div下面。如果你将其前置，你可以看到它在右侧div上方。但我认为这并不理想。

 z-index: 1;

我在左侧使用了 z-index: 1; ，在右侧 div 上使用了 z-index: 0;。

虽然这样可以工作，但我认为还有更好的解决方案。

- Impulss

---

我刚刚意识到，当min-width生效时，右侧div会放在左侧div下面。我会继续研究这个问题。 - Impulss