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

Question

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

Dav*_*ave 6 html css navigation fullscreen

我想有以下布局

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Sot*_*ris 7

你可以试试这个.它适用于我测试的浏览器(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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Sar*_*raz 0

您可能想看看并从中获得想法：

超级简单的两栏布局

请参阅此处的演示。

归档时间：	15 年，3 月前
查看次数：	21270 次
最近记录：	11 年，9 月前