絕對定位的小孩子的身高100％

Question

我正在製作一個導航，其中的孩子將會在不同的框中顯示，非常類似於http://www.boffi.com/EN/Collections/bathrooms/b14.aspx。我設法使用絕對定位來分隔孩子，但不能讓子元素背景具有100％的高度。它是一個列表元素，所以如果我把高度：100％，底部的兩個主要導航元素消失。請幫忙！這裏是我的html：

<ul id="mainmenu"> 
    <li id="liHome" class="active"> 
     <a href="#item-x1y1" class="panel" rel="none" id="Home">Home</a> 
    </li> 
    <li id="liServices" class=" "> 
     <a href="#item-x1y2" class="panel" rel="SubMenuY2" id="Services">Services</a> 
     <div class="child"> 
     <ul style="" id="SubMenuY2" class="submenu"> 
      <li><a href="#">Sub-item 1</a></li> 
      <li><a href="#">Sub-item 2</a></li> 
     </ul> 
     </div> 
    </li> 
    <li id="liEnvironment"> 
     <a href="#item-x1y3" class="panel" rel="none" id="Environment">Environment</a> 
    </li> 
    <li id="liCareer"> 
     <a href="#item-x1y4" class="panel" rel="none" id="Career">Career</a> 
    </li> 
    <li id="liContact"> 
     <a href="#item-x1y5" class="panel" rel="none" id="Contact">Contact</a> 
    </li> 
</ul> 

和CSS

body, html{ 
height:100%; 
} 
#mainmenu{ 
background:black; 
color: white; 
width:130px; 
position:relative; 
top:0; 
height:100% 
} 
#mainmenu li a { 
color:white; 
} 

ul.submenu{ 
position:absolute; 
background:blue; 
width:130px; 
} 

div.child{ 
position:relative; 
margin-left:130px; 
} 

非常感謝您的幫助。

Answer 1

我簡化你的代碼一點...好，我其實只是刪除了div與class="child"，因爲你並不真的需要它。

然後，我所做的就是這樣的：

ul.submenu{ 
    position:absolute; 
    left: 130px; top: 0; 
    background:blue; 
    width:130px; 
    height: 100%; 
} 

在小提琴看看：http://jsfiddle.net/joplomacedo/rqqju/

了這是你要找的東西？