如何調整此菜單的高度？

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; 
}