下拉菜单中没有 100% 高度的元素

Question

试图创建一个简单的下拉菜单，但它是用于具有百分比大小的导航栏。

一切正常，但下拉标题的样式不起作用。

我希望它具有 100% 的导航栏高度，并且当下拉菜单出现时，它位于导航栏的正下方。

目前，标题不会调整其高度，因此下拉菜单直接位于内容下方。

我还希望移动整个下拉菜单，使其右侧与 div 的右侧对齐。

这是电流的小提琴：

http://jsfiddle.net/aaMjp/1/

仅供参考，代码如下：

<div id="topbar">
<div id="topbarcentre">
    <div class="pagecontrol1">
        <div id="showbuildfollowers">
            <div class="buildscore">
                <ul class="menu-buildpoints">
                    <li>
                    <a class="buildpointstitle" href="#">
                        <div class="buildscoretext">3.2k</div>
                    </a>
                        <ul>
                        <li><a href="#">Views: 1372</a></li>
                        <li><a href="#">Followers: 89</a></li>
                        <li><a href="#">Comments: 102</a></li>
                        </ul>
                    </li>
                </ul>   
            </div>      
        </div>
    </div>
</div>   

* {padding: 0px; margin: 0px;text-decoration:none;}
#topbar {
height: 6%; 
width: 100%; 
background-color:#444; 
position:fixed; 
z-index: 950;
}

.pagecontrol1 {
color:#FFF;
padding-top: 0%;
height: 100%;
}

#topbarcentre {
width: 82%;
margin:auto;
height: 100%;
}

#showbuildfollowers {
width: 10%;
float:right;
margin-right: 22%;
margin-left: 1px;
padding: 0%;
height: 100%;
}

.buildscore {
width: 100%;
border-right: 1px solid #444;
background-color: #666;
color:#fff;
font-size: 12px;
float:left;
-webkit-appearance: none;
height: 100%;
outline: none;
display: table;
}

.buildscore:hover {
background-color:#555;
cursor: pointer;
 }

.menu-buildpoints {
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
background-color:#999;
 }

.buildpointstitle {
color: #fff;
width: 100%;
height: 100%;
}

.buildscoretext {
background-color: #f00;
}

/* DROP IT CSS */

.dropit {
list-style: none;
padding: 0;
margin: 0;
}
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu {
position: absolute;
top: 100%;
left: 0; /* dropdown left or right */
z-index: 1000;
display: none;
min-width: 150px;
list-style: none;
padding: 0;
margin: 0;
}
.dropit .dropit-open .dropit-submenu { display: block; }

.menu-buildpoints ul {
display:none;
}
.menu-buildpoints ul.dropit-submenu {
background-color:#555;
border:1px solid #444;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.15);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.15);
box-shadow:0px 1px 3px rgba(0,0,0,0.15);
}
.menu-buildpoints ul.dropit-submenu a {
display:block;
font-size:14px;
line-height:25px;
color:#fff;
padding:0 18px;
border-bottom: 1px solid #333;
}
.menu-buildpoints ul.dropit-submenu a:hover{
color:#fff;
text-decoration:none;
}

您可以看到标题被赋予红色背景以清楚地显示它的高度，一旦它的高度达到100%，整个div也将是可点击的。

对这些问题有帮助吗？使用名为 Dropit 的 jquery sn-p。所有代码都可以在小提琴上看到。

Answer 1

为了正确理解您，点击 3.2k 后，下拉菜单应该就在导航栏下方，对吗？

如果是这种情况，您可以尝试以下几个选项：

.buildscoretext{
margin:auto;
display:block;
height:100%;
}

这应该将导航变成一个块，迫使下拉菜单处于正确的高度。

如果这不起作用，您还可以尝试在 .dropit ul 类中添加 margin-top。

不要成为那些人中的一员，但尽量限制你对 div 的使用。在 HTML 5 中，使用类和 ID 让事情变得更简单。您在导航之前有几个 div，不需要复杂性。下次你可以试试这样的：

<div id="header-container">
<header>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
</div>

希望这有帮助，如果没有，我很乐意再试一次。

Answer 2

子菜单是position: absolute，这意味着它将基于父容器的边界（根li）定位。您需要给它一个固定的top: x 高度，该高度等于导航栏的高度。

example

Answer 3

块和高度

我通过添加这个来修复它：

.dropit, .dropit-trigger, .dropit-trigger a{display:block}
.dropit, .dropit-trigger, .dropit-trigger a, .dropit-trigger div{height:100%;}

并删除它：

.menu-buildpoints { display: table-cell }
.buildscore {display: table}

made a fiddle

height:100% 通常是相对于父级的，所以从导航到锚点内的 div，所有东西都应该有height:100%