Html 父Div中Div下的Div在显示中占10%的高度？

我想用左边的一个大的父div来制作简单的菜单。然后，我想给每个div（10个链接）10%的高度，这样它将使100%。但它没有显示为10%。如何制作真正的10%的节目，而不是足够容纳我的内容的空间，而是10%的空间？请输入解决方案

很简单，奇怪你什么都没试过

---

尝试将此侧边栏合并到列表元素中，如下所示：

<div id="sidebar_wrapper">
<ul>
<li><a href="http://yourlink.com">Link #1</a></li>
<li><a href="http://yourlink.com">Link #2</a></li>
<li><a href="http://yourlink.com">Link #3</a></li>
</ul>
</div>

---

然后根据需要定制CSS！请记住，每个屏幕的分辨率都是不同的，一个屏幕的10%会与其他屏幕不同，除非您有固定的高度。

为什么要限制您的菜单高度和链接数？每个额外的链接，你将需要更新的百分比。另一件事是链接内的垂直空间，因为高度，没有高度，您可以做得更好，但以下是您的示例：

HTML:

jsiddle上的示例：

有关详细信息，请参阅

#bigParent{
   height: 100%; 
   position:fixed;  /*depend of the rest of the page*/
}

.divChild {
    margin: 0px;
    height: 10%;
}


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

---

请包括您尝试过的和不起作用的代码。

<div id="sidebar_wrapper">
<ul>
<li><a href="http://yourlink.com">Link #1</a></li>
<li><a href="http://yourlink.com">Link #2</a></li>
<li><a href="http://yourlink.com">Link #3</a></li>
</ul>
</div>

#sidebar_wrapper {
width: auto;
height: 650px /* Add height you want and the link element will take 10% of this*/;
}

#sidebar_wrapper ul li a {
width: 100%;
height: 10% /* Link will take 10% times the amount of links inside that it takes to fill the height of the #sidebar_wrapper */;
}

<div class="menu">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
    <a href="#">link 3</a>
    <a href="#">link 4</a>
    <a href="#">link 5</a>
    <a href="#">link 6</a>
    <a href="#">link 7</a>
    <a href="#">link 8</a>
    <a href="#">link 9</a>
    <a href="#">link 10</a>
</div>

*
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.menu
{
    width: 200px;
    height: 300px;
}

.menu a
{
    display: block;
    height: 10%;
    text-decoration: none;
    padding: 0 5%;
    background: #eee;
    color: #000;
    border-bottom: 1px solid;
}

#bigParent{
   height: 100%; 
   position:fixed;  /*depend of the rest of the page*/
}

.divChild {
    margin: 0px;
    height: 10%;
}


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}