带有全尺寸左导航栏和标题的CSS布局_Css_Navigation_Fullscreen_Html

带有全尺寸左导航栏和标题的CSS布局

css navigation html

带有全尺寸左导航栏和标题的CSS布局,css,navigation,fullscreen,html,Css,Navigation,Fullscreen,Html,我想有以下的布局 +++++++++++++++++++++++ +Header + +++++++++++++++++++++++ +Nav+ + + + + + + + + + Content + + + + +++++++++++++++++++++++ 所以基本上是一个带有标题的两列布局。我在网上检

我想有以下的布局

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

所以基本上是一个带有标题的两列布局。我在网上检查了许多CSS布局生成器，但是他们只是给我一个结果，左边的导航栏和里面的内容一样大。我可以用高度来缩放它：500px或任何东西，但我希望它始终是从浏览器窗口的顶部到底部的全尺寸。使用高度更改值：100%无效。

如果你想自己尝试一下：然后选择完整的页面，两列布局，带标题，看看我的意思。如果您愿意，您可以告诉我在生成的css文件中必须调整哪些属性才能使其正常工作

您可能需要查看一下并从以下方面获得想法：

一个简单的回答：看看CSS框架，比如-这些框架让你定义网格

以下是一个示例页面：

关于高度问题，请尝试此选项，它将始终为您的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>

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

您可以试试这个。它适用于我测试过的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属性。只需设置宽度和浮动：左就可以了。