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

时间:2013-04-02 14:18:52

标签: css html layout

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

1 个答案:

答案 0 :(得分:0)

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

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