我在我们的网站上设置了一个左侧导航栏。它的显示方式是在导航顶部有一个标题图像(通常是客户的名字)，然后有一个表格，其中包含许多关于要做什么的选项。这些选项因客户端而异。显示此导航时，有两个图像沿着主表的两侧向下延伸，用作边框。这些是可换肤图像，是一张一张的像素图像。这样，在 CSS 文件中引用相同的图像名称时，每个客户的皮肤可以是不同的颜色。
在我们向这些页面添加文档类型之前，图像会延伸到页面底部或表格内内容的底部，以较长者为准。现在，添加文档类型以使页面成为标准，我无法让它做同样的事情。
我的设置是我有一个 DIV 作为标题，它只包含标题图像。然后，我有一个 DIV 作为容器，其中包含三个 DIV 元素作为子元素。第一个和最后一个包含一个像素图像作为左右边框，中间的 div 包含内容表。
我无法将边框图像 DIV 设置为 100% 高度，因为页面大小将是 100% + 页眉图像的大小。而且我不能只依赖图像到内容的底部，因为如果内容不占据整个页面，它需要是页面的整个长度。我在这里不知所措，没有使用 javascript 来计算调整页面大小时 DIV 的大小。
顺便说一下，我正在尝试为所有浏览器拍摄，因此 IE(至少 9)和 Chrome 都是 m 测试用例。在此处链接代码以显示我的问题所在。如您所见，左侧、内容和右侧 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;
}
最佳答案
我过去遇到过类似的情况，我所能想到的就是使用 javascript...
CSS(据我所知)并不真正具备您正在寻找的动态能力。
关于css - 获取 DIV 标签以扩展到页面或内容的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15766514/