Html CSS：填充整个页面高度的右侧导航DIV

我目前正在开发一个新网站：

右边带有单词test的浅灰色条应该是我的导航条。几天来，我一直在尝试让它的高度填充页面高度，不仅仅是浏览器高度，而是整个页面。就像我制作的这个模型一样：

我现在已经尝试了多种方法，从简单的方法，例如将body和html高度设置为100%No luck，到CSS hack，例如：ejeliot.com/samples/equal-height-columns/example-7.html，这些方法都很有效，但是hack对我来说是最后的选择

这是我的HTML和CSS代码。如果您想知道：是的，我有一个包装器和一个容器div，包装器使容器居中，而容器在包装器中保持固定位置

HTML

---

如果我看到你的布局，如果你给出位置：固定，而不是位置：绝对，那就好了；到您的导航分区。这样写：

#navigation{
    position:fixed;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}

---

请为包装添加背景色，并查看您的leftcolumn和rightcolumn不在包装区域中。也许这是模板中的一个问题。修好后请检查

---

如果这不起作用，您可以使用jQuery动态获取高度并设置导航高度。

此布局中存在一个大问题，您在body标签上使用的背景图像是1920x99，因此您的身体仅对此部分作出反应

一些快速的更改使其工作正常。 请看我附加的输出，我用开发人员工具做了这些快速更改。 您应该重新构造布局，将所有内容放在包装器中，并使用float、position和其他部分

在您的布局中，并没有任何东西可以协同工作。您应该重新构建布局，并为每个部分使用适当的样式

---

如果您希望菜单始终可见，您可能需要从一个窗口使用解决方案

如果您只想在滚动之后扩展侧边栏-您需要使用所谓的css等高列-下面是一个示例：

如果您希望等高导航和包装应用此类。等高和

将此jquery函数用于库文件

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".equal_height"));
});

---

这可能会对您有所帮助。

为什么您的导航div位于包装器外部？这不是正确的结束方式为什么在结束标签上给出id名称？这是一个小错误，我昨天已经纠正了。我从昨天在另一个论坛上发布的帖子中复制了大部分HTML代码。在这篇博文中更新了HTML！我一到家就要试试这个整整一个晚上都在摆弄其他答案，不再关心它，而是用这个来代替。谢谢你的建议！

#navigation{
    position:fixed;
    top:0;
    right:0;
    width: 16%;
    min-width: 163px;
    max-width:233;
    background-image:url(images/navbarbg.jpg);
    height: 100%;
}

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
$(document).ready(function() {
   equalHeight($(".equal_height"));
});