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