在CSS 100％高度固定侧边栏

我正在做一个固定的侧边栏，我决here in stack overflow，所以现在我有这个代码的固定条：在CSS 100％高度固定侧边栏

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

它具有200像素高度（刚看看它是如何工作的），但我需要的边栏必须始终有100％的高度。我已经在stackoverflow中看到过各种帖子，说人造的列是一个选项：http://www.alistapart.com/articles/fauxcolumns/。但在我的<div id="sidebar">里面，在某些情况下，还会有2个DIV：#menu和#submenu，因此宽度会有所不同。

我能做些什么？我不需要支持旧的浏览器：IE9，最新的Chrome和最新的Firefox都可以。

来源

2011-11-03 udexter

我会为身体添加一个border-left，获取最长的菜单项并将其宽度与ems匹配，然后在侧边菜单中设置负边距。然后，它会显示为等额返还高度内容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>

来源

2011-11-03 09:50:31

嘿@Dave！这是一个很好的解决方案，但是......如果sidemenu有背景图像（纹理）会发生什么，你将如何解决这个问题？先谢谢你！ – udexter

@udexter - 在上面的答案中增加了一个例子 - 有几种方法可以做到这一点，但这是第一个想到的...... –

问题是可你的列背景是否有某种渐变？如果它只是纯色，那么您是否可以不留下未设置的2列的宽度，并将背景图像平铺在x轴以及y轴上？

来源

2011-11-03 09:52:54 Brighty

是的，它附有纹理 – udexter

如果您制作了纹理图像9000像素宽，但将内容div放在比sidemenu div更高的z索引处？ – Brighty

这是使用100％固定定位和高度的另一个想法。我还在那里放了足够的休息时间来展示内容将如何滚动，但边栏和内容将保留在原来的位置。

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      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>

来源

2012-07-02 15:57:31

在CSS 100％高度固定侧边栏

回答

相关问题