CSS 布局宽度固定宽度和流体右列

Question

我有一个固定的容器，比如说 1120 像素。在这个容器内，我有一个 400 像素的左侧边栏，我需要一个从容器扩展并触摸屏幕右侧的右侧边栏。这是一张解释我想要的布局的图片：

这是我目前取得的进展：http://jsfiddle.net/UvxK8/

#wrapper {
    background:#f0f0f0;
    margin:0 auto;
    width:400px;
    overflow:hidden;
}

#wrapper .left {
    width:100px;
    float:left;
    height:600px;
    background:#333;
}

#wrapper .right {
    position:absolute;
    margin-left:100px;
    height: 650px;
    background: green;
    min-width:100%;
}

显然不好，因为右侧边栏太宽，出现水平滚动条。

Answer 1

您使用的图片与您对所需内容的描述不符；我想也许你看错了。如果右侧边栏溢出容器，那么固定宽度容器的意义何在？

从你的图片来看，你想要的是……

HTML

<div id="header"><h1>Content here.</h1></div>
<div id="container">
    <div id="container-left">
        <p>Content here.</p>
    </div>
    <div id="container-right">
        <p>Content here.</p>
    </div>
</div>

CSS

#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}

这将创建您使用的图像插图。 jFiddle在这里：http://jsfiddle.net/4JNX2/

Answer 2

添加相对于包装器的位置。试试这个

HTML

<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>

CSS

#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}

#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}

#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}