Question

我有一个嵌套在页脚元素中的无序列表。我想让一些线条的背景占据父元素的整个高度，但是当我尝试这样做时，在某处有一个边距或填充，我无法弄清楚在哪里。我尝试过改变显示，边距和填充设置的组合，没有任何乐趣。

<footer> 
<ul class="navigation">
<li><a href="facebook.com"><img src="images/facebooklogo.png" alt="facebook icon" /></a></li>
<li><a href="design.htm" >design</a></li>
<li><a href="salvage.htm" >salvage</a></li>
<li><a href="suigeneris.htm" >sui generis</a></li>
<li><a href="flooring.htm" >flooring</a></li>
<li><a href="paneling.htm" >paneling</a></li>
<li><a href="beams.htm" >beams</a></li>
<li><a href="reclaimedwood.htm" >reclaimed wood</a></li>
</ul>

</footer>

footer {
width: 100%;
background: #80A353;
}

footer .navigation li a {
display: block;
color: white;
font-size: 12px;
background: white;
}

footer .navigation {
margin-left: auto;
margin-right: auto;
width: 850px;
}

任何洞察力

Answer 1

如果您知道确切的尺寸，可以使用以下内容完成全高度的操作：

.parent {
  position: relative;
  height: ###px;
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
}

如果您在父级中有另一个元素，则可以使用此技术使其中一个子级达到全高。

如果您想要多个高度相等的元素，并且不需要IE＆lt; = 7支持，您可以执行以下操作：

.parent { display: table; }

.child { display: table-cell; }

嵌套元素 - 使背景占据父级的全高

1 个答案: