Question

我正在修复我解决here in stack overflow的固定边栏，所以现在我有一个固定的栏，其中包含以下代码：

<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都可以。

Answer 1

我会在身体上添加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>

Answer 2

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

Answer 3

这是使用固定定位和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>

修复了CSS中100％高度的侧边栏

3 个答案: