Question

我想有以下布局

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

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

Answer 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>

Answer 2

您可能希望了解并从中获取想法：

Super Simple Two Column Layout

See the demo here.

Answer 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>

Answer 4

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

完整尺寸的CSS布局左侧导航栏和标题

4 个答案: