我在我们的网站上有一个左侧导航栏的设置。它的显示方式是在导航的顶部有一个标题图像(通常是客户端的名称),然后有一个表格,其中包含许多关于该做什么的选项。这些选项取决于客户端。显示此导航时,有两个图像沿主表的两侧向下运行,用作边框。这些是可换肤的图像,它们是逐个像素的图像。这样,每个客户端的皮肤可以是不同的颜色,同时在CSS文件中引用相同的图像名称。
在我们向这些页面添加文档类型之前,图像会延伸到页面底部或表格内部的底部,以较长者为准。现在,添加doc类型以使页面成为标准,我无法让它做同样的事情。
我的设置是我有一个DIV作为标题,它只是保存标题图像。然后,我有一个DIV作为容器,有三个DIV元素作为孩子。第一个和最后一个将一个像素图像保持为左右边界,而中间div保存内容表。
我无法将边框图像DIV设置为100%高度,因为页面大小将是标题图像大小的100%+。而且我不能仅仅依赖于内容底部的图像,因为如果内容不占据整个页面,它就需要是整个页面的长度。我不知道该怎么做,没有使用javascript来计算当我调整页面大小时DIV的大小。
顺便说一句,我试图为所有浏览器拍摄,因此IE(至少9个)和Chrome都是测试用例。链接代码在这里显示我的问题是什么。如您所见,left,content和right div延伸到页面底部,我不想发生这种情况。
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </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;
}
答案 0 :(得分:0)
我过去遇到过类似的情况,我能想到的就是使用javascript ...
CSS(据我所知)并不具备您正在寻找的动态功能。