我用以下CSS代码创建侧边栏:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
但是当我改变浏览器宽度时,侧边栏的宽度不会自适应。我该如何使侧边栏具有流动性呢?
谢谢。
我用以下CSS代码创建侧边栏:
.sidebar {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 30%;
height: 100%;
border-right: 1px solid #333;
}
看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; }
这是一个有点奇怪的问题,当使用流式布局时,似乎很难让背景颜色延伸到两列的底部。
我提供了解决方法以及一个简单的两列流式布局。
试试这个 - 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;
}