html - 如何制作流畅的侧边栏？

Question

我正在用这个 CSS 代码创建一个侧边栏：

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

但是当我更改浏览器宽度时，侧边栏宽度不会缩放。如何使侧边栏流畅？

谢谢。

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; }

Answer 2

这是一个奇怪的问题，但在使用流体布局时，让背景颜色延伸到两列的底部似乎具有挑战性。

我包含了解决方法以及一个简单的 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;
    }