Question

我正在创建一个带有此CSS代码的侧边栏：

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

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

感谢。

Answer 1

查看CSS部分中的身高。

以下是您的工作示例：

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

如何制作流畅的侧边栏？

2 个答案: