Question

我想为我的网页设置以下布局：

|         header       |
| navigation | details |
|            |         |

导航窗格（动态生成的内容）包含数百个元素。我希望在导航窗格上创建一个垂直滚动条，使窗格的高度减去标题的高度。

我的页面大致有以下结构：

<div id=header></div>
<div id=content>
  <div id=navigation></div>
  <div id=details></div>
</div>

使用以下CSS：

#navigation {
    float: left;
    width: 400px;
    height: 100%;
    overflow: auto;
}

#details {
    margin-left: 420px;
}

除了导航窗格获得窗口高度的100％，而不是窗口高度的100％减去标题的高度之外，这主要是有效的。如果我可以避免它，我宁愿不明确设置标题的高度。我是网络开发的新手，所以我不介意做一些阅读。我需要做什么才能实现我想要的布局？

Answer 1

您必须确保您的身体标签和内容容器的高度也达到100％。您必须明确设置要遵守的子元素的父元素的高度。

body { 
    height: 100%;
} 

#content {
    height: 100%;
}

然而，这并未考虑标题的定位。以下文章演示了利用Dustin Diaz的最小高度快速黑客技术和内容容器上的负边距来实现100％高度同时不干扰标题的技术：

http://www.thechoppr.com/blog/2009/02/08/3-column-fluid-layout-100-height/

Answer 2

你说“如果我能避免它，我宁可不明确设置标题的高度。”我很确定你不能在没有切换到表格的情况下避免它。也就是说，这里有一个例子，说明如何使用标题高度设置为50px的div来实现它：

<html>
    <head>
        <style type="text/css">
            html, body {
                margin:0;
            }

            div#content {
                position:absolute;
                top:0px;
                z-index:-1;
                width:100%;
            }

            html, body, div#content, div#navigation-shell, div#details-shell {
                height:100%;
            }

            div#header {
                height:50px;
            }

            div#navigation-shell {
                float:left;
                width:400px;
            }

            div#navigation, div#details{
                padding-top:50px;
            }
        </style>
    </head>
    <body>
        <div id="header"></div>
        <div id="content">
            <div id="navigation-shell">
                <div id="navigation"></div>
            </div>
            <div id="details-shell">                
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

一条注意事项：如果您要为navigation和/或details区域添加背景，则必须将它们实际应用到各自的shell div中包住他们。但是，所有实际内容都将包含在内部div中。

Answer 3

您必须将html和身高分别设置为100％：html, body {height: 100%;}

将div高度设置为父级的100％

3 个答案: