父 div 中 div 下的 div 显示高度为 10%？答案

【问题标题】：Div under div in parent div taking 10% height in display?父 div 中 div 下的 div 显示高度为 10%？
【发布时间】：2014-11-20 07:02:50
【问题描述】：

我想在左侧使用一个大的父 div 来制作简单的菜单。然后我想给每个 div（10 个链接）10% 的高度，这样它就会变成 100%。但它没有显示为 10%。如何制作真正的节目，比如 10%，而不是足够容纳我的内容的空间，而是 10%？请在 .

【问题讨论】：

请包含您尝试过的代码和无效的代码。

标签： html css height width

【解决方案1】：

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

<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% 与其他屏幕相比会有所不同，除非您的高度是固定的。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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%;
}

【讨论】：