Question

我想在左侧使用一个大的父div来制作简单的菜单。然后我想给每个div（10个链接）10％的高度，所以它将100％。但它并没有显示为10％。如何制作10％的真实节目，而不是我的内容足够的空间，但是10％？请解决方案。

Answer 1

相当简单，奇怪你没有尝试任何东西......

http://jsbin.com/pejame/1/edit?html,css,output

<div id="menu">
  <div>...</div> <!-- x10 -->
</div>

页面内容在这里

#menu{ /* fixed left menu */
  position:fixed;
  height:100%;
  width:10%;
}
#menu > div{
  height:10%;
}
#page{ /* scrollable page contents */
  margin-left:10%;
}

Answer 2

尝试将此侧边栏组合成一个列表元素，如下所示：

<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将高度添加到#sidebar_wrapper

#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 */;
}

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

Answer 3

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

HTML：

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

CSS：

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

关于jsfiddle的例子：http://jsfiddle.net/n42pqwnt/

Answer 4

请参阅http://jsfiddle.net/alemarch/e2pndkvj/了解详情

#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中的div下显示10％的高度？

4 个答案: