绝对定位的子 div 的 100% 高度答案

【问题标题】：100% height for a absoulutely positioned child div绝对定位的子 div 的 100% 高度
【发布时间】：2012-07-08 06:29:13
【问题描述】：

我正在制作一个导航，孩子们将显示在不同的框中，就像 http://www.boffi.com/EN/Collections/bathrooms/b14.aspx 一样。我设法使用绝对定位将子元素分开，但无法让子元素背景具有 100% 的高度。这是一个列表元素，所以如果我放 height: 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;
}

非常感谢您的帮助。

【问题讨论】：

你考虑过只用一张桌子吗？
无法使用表格。这是一个 wordpress 网站，客户更愿意保留代码语义。不过谢谢！我也想过！

标签： css navigation height css-position

【解决方案1】：

我稍微简化了你的代码.. 实际上我只是用class="child" 删除了div，因为你并不需要它。

然后，我所做的就是：

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

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

这就是你要找的吗？

【讨论】：