FIDDLE

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和body元素，以便div有一个参考点可以自己调整大小。然后，您需要将菜单项中的灰色背景移动到div本身，以提供拉伸菜单的一致外观。在display:inline-block上设置div可确保其宽度仅为最长菜单项的宽度，而不是默认块级别行为的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;
}

如何调整此菜单的高度？

1 个答案:

FIDDLE