具有全尺寸左侧导航栏和标题的 CSS 布局答案

【问题标题】：CSS Layout with full size left navbar and header具有全尺寸左侧导航栏和标题的 CSS 布局
【发布时间】：2010-08-11 07:35:06
【问题描述】：

我想要以下布局

+++++++++++++++++++++++
+Header               +
+++++++++++++++++++++++
+Nav+                 +
+   +                 +
+   +                 +
+   +      Content    +
+   +                 +
+++++++++++++++++++++++

所以基本上是带有标题的两列布局。我在网上检查了许多 CSS 布局生成器，但他们只是给我一个结果，左侧导航栏与其中的内容一样大。我可以用“height:500px”或其他什么来缩放它，但我希望它一直是全尺寸的（从浏览器窗口的顶部到底部）。使用“height:100%”更改值不起作用。如果你想自己尝试一下：http://guidefordesign.com/css_generator.php 然后选择整页，两列布局，带标题看看我的意思。如果您愿意，可以告诉我必须在生成的 css 文件中调整哪个属性才能使其正常工作

【问题讨论】：

标签： css navigation fullscreen html

【解决方案1】：

你可以试试这个。它适用于我测试过的浏览器（Firefox、IE7+8、Opera、Safari、Chrome）。只需使用标题和列的百分比单位即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>for stackoverflow</title>
  <style>
    body, html {
        padding : 0px;
        margin : 0px;
        height : 100%;
    } 

    #wrapper {
        width:900px;
        height:100%;
        margin: 0px;
        padding: 0px;
    }

    #header {
        height:10%;
        background-color:#930;
        width:900px;
    }

    #nav {
        background-color:#999;
        width:200px;
        height:90%;
        float:left;
    }

    #content {
        height:90%;
        background-color:#363;
        width:700px;
        float:left;
    }
  </style>
</head>

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="content"></div>
</div>
</body>

【讨论】：

很好的答案，但您无法控制height 属性。只需设置 width 和 float: left 即可。

【解决方案2】：

您可能想看看并从中获得灵感：

Super Simple Two Column Layout

See the demo here.

【讨论】：

【解决方案3】：

一个通用的答案：查看 CSS 框架，例如 http://www.blueprintcss.org/ - 这些框架可以让您定义网格。

这是一个示例页面：http://www.blueprintcss.org/tests/parts/sample.html

关于高度问题，试试这个（应该始终为您的 div 提供 100% 的浏览器窗口高度）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
    body {
        padding: 0px;
    }
    .Container {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #123456;
        color: black;
    }
    </style>
</head>
<body>
    <div class="Container">
    </div>
</body>
</html>

【讨论】：

【解决方案4】：

您可以尝试的一个解决方案是为内容区域提供一个垂直重复的背景图像（页面的高度和宽度为 1 像素）。该图像的左侧将具有导航背景颜色，其余部分将是内容背景颜色的颜色...

【讨论】：