Question

我正在尝试在html / css中创建一个垂直菜单。我有5个选项可供选择，每个选项的高度应为屏幕的20％。我尝试用高度设置高度：20％但它没有效果，由于某种原因设置宽度确实有效果。我尝试以像素为单位指定高度，但是由于某些原因它不起作用。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
ul.menu{
    height:100%;        
    list-style: none;
    padding: 0;
    margin: 0;
}
li.menu{

    height: 20%;
        display:block;
}
</style>
</head>
<body>
<ul class="menu">
    <li class="menu"><a href="">Link 1</a></li>
    <li class="menu"><a href="">Link 2</a></li>
    <li class="menu"><a href="">Link 3</a></li>
    <li class="menu"><a href="">Link 4</a></li>
    <li class="menu"><a href="">Link 5</a></li>
</ul>
</body>

Answer 1

高度：100％表示父高度的100％。由于你没有给ul的父级高度，所以代码不起作用。您需要添加以下css

html,body{
    height: 100%;
    min-height:100%;
}

如何在html / css中创建垂直菜单

1 个答案: