全尺寸左導航欄和標題

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

全尺寸左導航欄和標題

回答

相關問題