我正在做一个固定的侧边栏,我在堆栈溢出中解决了这个问题,所以现在我有一个带有此代码的固定栏:
<div id="main" style="width:100%;background:red;">
<div id="sidemenu" style="float:left;height:200px;background:#000;">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:200px;overflow-y:scroll;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
它的高度为200px(只是为了看它是如何工作的),但我需要的侧边栏必须始终保持100%的高度.我在stackoverflow中看过各种帖子,说人造列是一个选项:http://www.alistapart.com/articles/fauxcolumns/.但在我的内心<div id="sidebar">,在某些情况下,还有2个DIV:#menu和#submenu,所以宽度会有所不同.
我能做什么？我不需要支持旧浏览器:IE9,最新的Chrome和最新的Firefox都可以.
border-left我会在正文中添加 a ，获取最长的菜单项并匹配其宽度（以 em 为单位），然后在侧面菜单上设置负边距。然后它看起来会匹配内容 div 占据的任何高度（无论您明确设置它，还是内容扩展它）：
<body style="border-left: 10em solid #666;">
<div id="main" style="background:red;">
<div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:400px;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
对于带有纹理背景的侧边栏（一种方法），您可以设置以像素为单位的宽度以匹配纹理的宽度（不像ems那么灵活，但如果设置为最宽的项目，应该没问题），并且纹理沿着纹理重复y 轴：
<div id="main" style="background: url(pattern_157.gif) repeat-y;">
<div id="sidemenu" style="float:left;width:200px;background: transparent;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:600px;background:transparent;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>