如何调整此菜单的高度？

Question

我有一个适合我的网站的漂亮菜单。但是，当我将此菜单添加到我的页面时，我似乎无法让它填充页面垂直的长度（它已经是垂直的，只是长度不是很长）

我设法做到这一点的唯一方法是调整菜单按钮的长度，这会使长度变长，但由于高度，按钮会很丑。

我的 CSS：

    .menu_simple ul {
    margin: 0; 
    padding: 0;
    width:100px;
    list-style-type: none;
}

.menu_simple ul li a {
    text-decoration: none;
    color: white; 
    padding: 10.5px 11px;
    background-color: #BDBDBD;
    display:block;
}

.menu_simple ul li a:visited {
    color: white;
}

.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: white;
    background-color: #5FD367;
}

我的html：

   <div class="menu_simple">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

所以如果没有新菜单按钮的代码，我只希望菜单用背景填充垂直..

希望我的意思可以理解，谢谢。

Answer 1

这行得通吗？

FIDDLE

基本上，您需要将父 div 以及 html 和 body 元素的高度设置为 100%，以便 div 有一个参考点来调整自己的大小。然后，您需要将灰色背景从菜单项移动到 div 本身，以提供一致的拉伸菜单外观。在div 上设置display:inline-block 可确保其宽度仅为最长菜单项的宽度，而不是100% 的默认块级行为。

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
div.menu_simple {
    height:100%;
    background-color: #BDBDBD;
    display:inline-block;
}
.menu_simple ul {
    margin: 0;
    padding: 0;
    width:100px;
    list-style-type: none;
}
.menu_simple ul li a {
    text-decoration: none;
    color: white;
    padding: 10.5px 11px;
    display:block;
}
.menu_simple ul li a:visited {
    color: white;
}
.menu_simple ul li a:hover, .menu_simple ul li .current {
    color: white;
    background-color: #5FD367;
}