如何让元素填充父元素的 100% 高度答案

【问题标题】：How to get element to fill 100% height of parent如何让元素填充父元素的 100% 高度
【发布时间】：2014-07-29 22:33:59
【问题描述】：

我有一个简单的水平菜单。使用 CSS display:table 和 display:table-cell，我使菜单“合理”。当菜单变得足够窄时，一些<a> 元素中的文本会换行成两行，从而增加这些项目的高度。其余展开的<a>elements 保持在 1 行文本的高度，破坏了效果。如何使所有 <a> 元素填充其包含 <li> 的高度的 100%？

限制：

无法使用Javascript动态计算高度
无法使用 Flexbox，因为某些受支持的浏览器不支持 Flexbox

我这里有一个例子：http://codepen.io/anon/pen/cyJEt?editors=110，使用这个代码：

<ul class = "nav-mega">
  <li>
    <a href = "#">Two words</a>
  </li>
  <li>
    <a href = "#">More words</a>
  </li>
  <li>
    <a href = "#">Word</a>
  </li>
  <li>
    <a href = "#">Word</a>
  </li>
  <li>
    <a href = "#">More words</a>
  </li>
  <li>
    <a href = "#">End</a>
  </li>
</ul>

.nav-mega {
  padding:0;
  margin:0;
  display: table;
  width: 100%;

}
.nav-mega > li {
  display: table-cell;
  min-width: 10%;
  background:green;
}
.nav-mega > li a {
  display: block;
  background:red;
  outline:1px solid black;
  padding:10px;
}

【问题讨论】：

将背景颜色和边框底部设置为 li，将边框右侧设置为 li>a。
@Hareesh 这肯定会给出正确的外观，但链接的命中区域仍然不会填满 .nav-mega
你试过 100% 的高度吗，它对我有用。 li>当菜单变窄时，a 会填满整个点击区域。

标签： html css

【解决方案1】：

.nav-mega {
 padding:0;
 margin:0;
 display: table;
  width: 100%;
  height:100%;
 }
.nav-mega > li {
 display: table-cell;
 min-width: 10%;
 background:green;
 height:100%
}
.nav-mega > li a {
  display: block;
 background:red;
 outline:1px solid black;
 padding:10px;
 height:100%
}

为所有父母添加高度 100% 到 html 将起作用

【讨论】：

做到了 - 谢谢。奇怪的是，设置 .nav-mega 的高度如何影响 .nav-mega > li a 的渲染高度。

【解决方案2】：

只需要随机播放您添加属性的位置。

将背景和轮廓放在 li 而不是 a。

.nav-mega > li {
  display: table-cell;
  min-width: 10%;
  background:green;
   background:red;
  outline:1px solid black;
}

DEMO

【讨论】：

这肯定会给出正确的外观 - 但链接的点击区域不会像我想要的那样填充高度。