CSS：右鍵雙面導航DIV來填充整個頁面高度

我目前工作的一個新網站：http://maartenlodewijk.nl/2013/CSS：右鍵雙面導航DIV來填充整個頁面高度

右側淺灰色條（在它與單詞「test」）是應該是我的導航欄。我一直在嘗試好幾天，以獲得它的高度來填充頁面高度（不僅僅是瀏覽器高度，而是整個頁面）。就像在這個樣機我已經：http://i.imgur.com/Knjlc.jpg

我已經嘗試了多種方式現在，從簡單的如身體和HTML高度設置爲100％（沒有運氣那裏）和CSS黑客如在這裏：ejeliot .COM /樣品/等高柱/例如，7.html（其中一期工程，而是一個黑客確實是一個不得已的選擇對我來說）

這是我的HTML和CSS代碼。如果您選擇疑惑：是的，我都一個包裝和容器DIV，包裝中心的容器，而容器保持包裝內的固定位置。

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Maarten Lodewijk // Home</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 

<div id="navigation"> 
    test 
</div> <!-- end navigation --> 

<div id="wrapper"> 
<div id="container"> 
    <div id="header"> 
    <img src="images/headerpng.png" alt="Logo" border="0" /> 
    </div> <!-- header --> 
    <div id="weclome"> 
    <img src="images/homemessagepng.png" width="645" height="203" alt="Maarten Lodewijk, Communication &amp; Multimedia Designer" /></div><!-- end welcome --> 
    <div id="content"> 
     <div id="leftcolumn"> 
      <h1>HEADER</h1> 
       <p>TEXT</p> 

       <p>TEXT</p> 

       <p>TEXT</p> 
      </div><!-- end leftcolumn --> 

    <div id="rightcolumn"> 
     <h1>Contact</h1> 
      <table width="286" border=0> 
      <tbody> 
      <tr> 
       <td width="96">Mail:</td> 
       <td width="180" class="rightalign">[email protected]</td> 
      </tr> 
      <tr> 
       <td>Telefoon:</td> 
       <td class="rightalign">+31 6 348 268 52</td> 
      </tr> 
      </tbody> 
      </table> 
     <h1>HEADER</h1> 
     <p>TEXT</p> 

     <p>TEXT</p> 

     <p>TEXT</p> 


     </div><!-- end rightcolumn --> 
    </div> <!-- end content --> 
</div> <!-- end container --> 
</div> <!-- end wrapper --> 

</body> 
</html>

CSS

/* ----- TAGS -------*/ 

body { 
    font-size: 100%; 
    padding: 0px; 
    margin: 0px; 
    font-family: Georgia, "Times New Roman", serif; 
    background: #e8e8eb url(images/bg.png) repeat-y; 
    color: #666666; 
} 

html{ 
} 
h1{ 
    font-size: 150%; 
    color: #ff3366; 
    padding-top:30px; 
} 



/* ----- LAY OUT -----*/ 
#wrapper{ 
    width:955px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#container{ 
    width:645px; 
    margin-left:20px; 
} 

#content{ 
    padding: 0px 20px 0px 20px; 
} 

#navigation{ 
    position:absolute; 
    top:0; 
    right:0; 
    width: 16%; 
    min-width: 163px; 
    max-width:233; 
    background-image:url(images/navbarbg.jpg); 
    height: 100%; 
} 


#leftcolumn{ 
    width:286px; 
    float:left; 
} 

#rightcolumn{ 
    width:286px; 
    float:right; 
} 

/* ----- CLASSES -----*/ 
.rightalign{ 
    text-align:right; 
}

來源

2012-04-24 Maarten Lodewijk

你想要什麼.. – 2012-04-24 10:36:15

爲什麼你的導航div在包裝外？ – Jack 2012-04-24 10:37:37

<！ - end wrapper - > 這是不正確的方式關閉爲什麼你要給結束標記上的id名稱？ – Jack 2012-04-24 10:38:41

如果我看到你的佈局，這是很好的，如果你給position:fixed而不是position:absolute;您#navigation DIV。像這樣寫：

#navigation{ 
    position:fixed; 
    top:0; 
    right:0; 
    width: 16%; 
    min-width: 163px; 
    max-width:233; 
    background-image:url(images/navbarbg.jpg); 
    height: 100%; 
}

來源

2012-04-24 10:44:15 sandeep

在整個晚上擺弄其他答案，停止關心它並用它來代替。感謝您的建議！ – 2012-04-24 19:58:36

請添加背景顏色#wrapper，看看你的#leftcolumn和#rightcolumn不在#wrapper區域。也許這是你模板中的問題。修復後請檢查。

如果這不起作用，你可以使用jQuery來動態獲取高度並設置導航高度。

來源

2012-04-24 10:47:44

這個佈局存在很大的問題，您在身體標記上使用背景圖像，這是1920x99，所以您的身體只對本節作出反應。

一些快速的變化讓這個工作的罰款。請參閱我的連接輸出我做這些與開發工具的快速變化。你應該重新構建佈局，將所有內容都放入包裝中，並使用浮動，位置作爲導航和其他部分。

沒有在佈局一起工作，你應該重新構建它，並使用正確的作風爲每個部分

enter image description here

來源

2012-04-24 10:48:23 Jack

如果你希望你的菜單是始終可見，你可能想使用該解決方案從一個previous answer。

如果你只是想滾動後，延長你的側邊欄 - 你需要使用所謂的css equal height columns - 這裏是其中的一個例子：http://www.vanseodesign.com/css/equal-height-columns/

來源

2012-04-24 10:50:15 skip405

偉大的文章！我一回到家就試試這個。 :) – 2012-04-24 11:52:42

如果你想等高#navigation和#wrapper將此類.equal_height和

與使用庫文件

function equalHeight(group) { 
    tallest = 0; 
    group.each(function() { 
     thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
     tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
} 
$(document).ready(function() { 
    equalHeight($(".equal_height")); 
});

這個jQuery功能可能會幫助你。

來源

2012-04-24 10:57:01 Sam

CSS：右鍵雙面導航DIV來填充整個頁面高度

回答

相關問題