0

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

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

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

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

顺便说一句，我正在尝试为所有浏览器拍摄，所以 IE（至少 9 个）和 Chrome 都是 m 测试用例。在此处链接代码以显示我的问题。如您所见，左侧、内容和右侧 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;
}
4

1 回答 1

0

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

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

于 2013-04-02T14:22:59.820 回答