如何调整此菜单的高度？

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的至100％的高度，以及HTML和体元件，使得所述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; 
}