1

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

右侧的浅灰色条（其中包含“测试”一词）应该是我的导航条。几天来我一直在尝试让它的高度来填充页面高度（不仅仅是浏览器高度，而是整个页面）。就像我制作的这个模型一样：http: //i.imgur.com/Knjlc.jpg

我现在尝试了多种方法，从简单的方法，例如将 body 和 html 高度设置为 100%（没有运气）和 CSS hack，例如：ejeliot.com/samples/equal-height-columns/example-7。 html （可行，但 hack 对我来说确实是最后的选择）

这是我的 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;
}
4

5 回答 5

0

如果我看到了你的布局，那么如果你给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%;
}
于 2012-04-24T10:44:15.720 回答
0

请添加背景颜色#wrapper并查看您的#leftcolumn和#rightcolumn不在该#wrapper区域中。也许这是您的模板中的一个问题。请在修复后检查。

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

于 2012-04-24T10:47:44.123 回答
0

在这个布局中存在很大的问题，你在 body 标签上使用背景图片，1920x99所以你的身体只对这个部分做出反应。

一些快速的改变使这个工作正常。请查看我的附加输出，我使用开发人员工具进行了这些快速更改。您应该重组布局，将所有内容放在包装器中，并使用浮动、导航和其他部分的位置。

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

在此处输入图像描述

于 2012-04-24T10:48:23.813 回答
0

如果您希望您的菜单始终可见，您可能想使用先前答案中的解决方案。

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

于 2012-04-24T10:50:15.390 回答
0

如果你想要相等的高度#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"));
});

愿它对你有所帮助。

于 2012-04-24T10:57:01.847 回答