Question

我有一个简单的水平菜单。使用CSS display:table和display:table-cell，我已经制作了菜单＆＃34;对齐＆＃34;。当菜单变得足够窄时，某些<a>元素中的文本会包含2行，从而增加这些项的高度。其余未展开的<a>元素保持在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;
}

Answer 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将起作用

Answer 2

只需要在添加属性的位置进行随机播放。

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

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

DEMO

如何获取元素填充父级的100％高度

2 个答案: