如何制作流动的侧边栏？

Question

我用以下CSS代码创建侧边栏：

.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}

但是当我改变浏览器宽度时，侧边栏的宽度不会自适应。我该如何使侧边栏具有流动性呢？

谢谢。

- swayziak

---

请提供一个在jsfiddle.com上的示例？ http://jsfiddle.net/BQW9F/ - Wottensprels

看起来可行。 - Vucko

为什么不呢？它可以根据浏览器的大小进行缩放。为什么不行呢？你已经使用百分比设置了宽度。 - Manish Mishra

你能提供HTML和其他CSS吗？ - thgaskell

请确定正确答案！ - Erfan Jazeb Nikoo

Answer 1

看CSS中的body高度部分。

这里为您提供一个可行的例子：

您的HTML代码：

<div id="content"> 
<p>This design uses a defined body height of 100% which allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

<div id="sidebar"> 
<p>This design uses a defined body height which of 100% allows setting the contained left and 
right divs at 100% height.</p> 
</div> 

您的CSS：

body { 
margin:0; 
padding:0; 
width:100%; /* this is the key! */ 
} 

#sidebar { 
position:absolute; 
right:0; 
top:0; 
padding:0; 
width:30%; 
height:100%; /* works only if parent container is assigned a height value */ 
color:#333; 
background:#eaeaea; 
border:1px solid #333; 
} 

#content { margin-right: 200px; }

- Erfan Jazeb Nikoo

---

OP谈论的是流体宽度，而不是高度。 - Yenn

Answer 2

这是一个有点奇怪的问题，当使用流式布局时，似乎很难让背景颜色延伸到两列的底部。

我提供了解决方法以及一个简单的两列流式布局。

试试这个 - jsFiddle

    html, body {
        margin:0;
        padding:0;
        background:silver; 
/* workaround to get the columns to look even, 
change color depending on which column is longer */ 
    }

    #sidebar {
        position:absolute;
        left:0px;
        top:0px;
        padding:0;
        width:30%;
        background:silver;
        word-wrap:break-word;
    }

    #content {
        position:absolute;
        right:0px;
        width:70%;
        word-wrap:break-word;
        background:gray;
    }

- apaul