Question

我目前正在开设一个新网站：http://maartenlodewijk.nl/2013/

右侧的浅灰色条（其中带有“test”一词）应该是我的导航栏。我一直在努力让它的高度填满页面高度（不仅仅是浏览器高度，而是整个页面）。就像我在这个模型中做的那样：http://i.imgur.com/Knjlc.jpg

我现在尝试了多种方法，从设置正文和html高度等简单的方法到100％（没有运气）和CSS hack如下：ejeliot.com/samples/equal-height-columns/example -7.html（哪个有效，但黑客真的是我的最后选择）

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

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maarten Lodewijk // Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="navigation">
    test
</div> <!-- end navigation -->

<div id="wrapper">
<div id="container">
    <div id="header">
    <img src="images/headerpng.png" alt="Logo" border="0" />
    </div> <!-- header -->
    <div id="weclome">
    <img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication &amp; Multimedia Designer" /></div><!-- end welcome -->
    <div id="content">
        <div id="leftcolumn">
            <h1>HEADER</h1>
                <p>TEXT</p>

                <p>TEXT</p>

                <p>TEXT</p>
            </div><!-- end leftcolumn -->

    <div id="rightcolumn">
        <h1>Contact</h1>
            <table width="286" border=0>
            <tbody>
            <tr>
                <td width="96">Mail:</td>
                <td width="180" class="rightalign">mail@maartenlodewijk.nl</td>
            </tr>
            <tr>
                <td>Telefoon:</td>
                <td class="rightalign">+31 6 348 268 52</td>
            </tr>
            </tbody>
            </table>
        <h1>HEADER</h1>
        <p>TEXT</p>

        <p>TEXT</p>

        <p>TEXT</p>


      </div><!-- end rightcolumn -->
    </div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end wrapper -->

</body>
</html>

CSS

/* ----- TAGS -------*/

body {
    font-size: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Georgia, "Times New Roman", serif;
    background: #e8e8eb url(images/bg.png) repeat-y;
    color: #666666;
}

html{
}
h1{
    font-size: 150%;
    color: #ff3366;
    padding-top:30px;
}



/* ----- LAY OUT -----*/
#wrapper{
    width:955px; 
    margin-left:auto;
    margin-right:auto;
}

#container{
    width:645px;
    margin-left:20px;
}

#content{
    padding: 0px 20px 0px 20px;
}

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


#leftcolumn{
    width:286px;
    float:left;
}

#rightcolumn{
    width:286px;
    float:right;
}

/* ----- CLASSES -----*/
.rightalign{
    text-align:right;
}

Answer 1

如果我看到了您的布局，那么如果您将position:fixed而不是position:absolute;提供给 #navigation DIV，那就太好了。写得像这样：

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

Answer 2

请为#wrapper添加背景颜色，并看到#leftcolumn和#rightcolumn不在#wrapper区域。也许这是您模板中的问题。修好之后请检查。

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

Answer 3

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

一些快速的变化使这个工作得很好。请参阅我的附件输出我使用开发人员工具进行了这些快速更改。你应该重新布局布局把所有内容放在包装器中并使用浮点数，导航位置和其他部分。

在您的布局中没有任何内容可以合作，您应该重新构建它并为每个部分使用适当的样式

enter image description here

Answer 4

如果您希望菜单始终可见，您可能希望使用previous answer中的解决方案。

如果您只是想在滚动后扩展侧边栏 - 您需要使用所谓的css equal height columns - 以下是它们的示例：http://www.vanseodesign.com/css/equal-height-columns/

Answer 5

如果您想要相同的身高#navigation而#wrapper应用此课程.equal_height和

将此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"));
});

愿它能帮到你。

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

5 个答案: