Question

我在我们的网站上有一个左侧导航栏的设置。它的显示方式是在导航的顶部有一个标题图像（通常是客户端的名称），然后有一个表格，其中包含许多关于该做什么的选项。这些选项取决于客户端。显示此导航时，有两个图像沿主表的两侧向下运行，用作边框。这些是可换肤的图像，它们是逐个像素的图像。这样，每个客户端的皮肤可以是不同的颜色，同时在CSS文件中引用相同的图像名称。

在我们向这些页面添加文档类型之前，图像会延伸到页面底部或表格内部的底部，以较长者为准。现在，添加doc类型以使页面成为标准，我无法让它做同样的事情。

我的设置是我有一个DIV作为标题，它只是保存标题图像。然后，我有一个DIV作为容器，有三个DIV元素作为孩子。第一个和最后一个将一个像素图像保持为左右边界，而中间div保存内容表。

我无法将边框图像DIV设置为100％高度，因为页面大小将是标题图像大小的100％+。而且我不能仅仅依赖于内容底部的图像，因为如果内容不占据整个页面，它就需要是整个页面的长度。我不知道该怎么做，没有使用javascript来计算当我调整页面大小时DIV的大小。

顺便说一句，我试图为所有浏览器拍摄，因此IE（至少9个）和Chrome都是测试用例。链接代码在这里显示我的问题是什么。如您所见，left，content和right div延伸到页面底部，我不想发生这种情况。

//HTML

<html>
    <body>
        <div class="NavHeader">&nbsp;</div>
        <div id="NavBody">
            <div id="NavLeft"> &nbsp;</div>
            <div id="NavContent">&nbsp;<br>&nbsp;</div>
            <div id="NavRight">&nbsp;</div>
        </div>
    </body>
</html>

// CSS

html, body {
    height: 100%;
}
.NavHeader {
    height: 40px;
    width: 100%;
    background-color: blue;
}
#NavBody {
    height: 100%;
}
#NavLeft {
    height: 100%;
    float: left;
    background-color: black;
    width: 1px;
}
#NavContent {
    height: 100%;
    float: left;
    background-color: green;
}
#NavRight {
    height: 100%;
    float: right;
    background-color: black;
    width: 1px;
}

Answer 1

我过去遇到过类似的情况，我能想到的就是使用javascript ...

CSS（据我所知）并不具备您正在寻找的动态功能。

让DIV标签扩展到页面底部或内容

1 个答案: