全尺寸左导航栏和标题

CSS布局，我想有以下布局全尺寸左导航栏和标题

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

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

来源

2010-08-11 Dave

你可能想看看，并从得到的想法：

Super Simple Two Column Layout

See the demo here.

来源

2010-08-11 07:37:09 Sarfraz

有点笼统的回答：看进CSS框架，如http://www.blueprintcss.org/ - 这些让你定义一个网格。

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

关于高度问题，试试这个（应该给你的浏览器窗口的高度为100％的DIV所有的时间）：

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

来源

2010-08-11 07:39:36 miku

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

来源

2010-08-11 07:53:28 Naruto

您可以试试这个。它适用于我测试过的浏览器（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>

来源

2010-08-11 09:23:21 Sotiris

好的答案，但你没有控制'height'属性。简单地设置'width'和'float：left'就可以实现。 – beautifulcoder 2013-09-01 21:06:32

全尺寸左导航栏和标题

回答

相关问题