我的导航栏没有垂直跨越以适应父 div。为什么？答案

【问题标题】：My nav bar doesn't span vertically to fit the parent div. Why?我的导航栏没有垂直跨越以适应父 div。为什么？
【发布时间】：2014-04-09 15:52:36
【问题描述】：

http://acjdesigns.com

我在 wordpress 上使用子主题，由于某种原因，导航栏不适合 div“标题”。我尝试了 height: 100% 的所有部分。

.main-nav {
    float: right;
    border: none;
    position: relative;
    margin: 0px auto;
    padding: 0px;
    clear: none;
    height: 100%;
}
.menu, .menu ul {
    text-decoration: none;
    text-shadow: 0px;
    margin: 0px auto;
    padding: 0px;
    clear: none;
    height: 100%;
}
.menu li a:link {
    border: none;
    color: #353535;
    background-color: white;
    text-transform: lowercase;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:visited {
    border: none;
    color: #353535;
    background-color: white;
    text-transform: lowercase;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:hover {
    border: none;
    color: DeepPink;
    text-transform: lowercase;
    background-color: white;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight: normal;
    font-size: 15px;
    background-image: none;
}
.menu li a:active {
    border: none;
    color: DeepSkyBlue;
    text-transform: lowercase;
    background-color: white;
    font-family:'Open Sans', sans-serif;
    text-shadow: 0px 0px 0px;
    font-weight:normal;
    font-size: 15px;
    background-image: none;
}

根据要求，HTML：

<div id="header">       
<div id="logo">
    <a href="http://acjdesigns.com/"><img src="http://acjdesigns.com/wp-content/uploads/2014/01/cropped-copy-Logo-012.png" width="250" height="54" alt="ACJ Designs"/></a>
    </div><!-- end of #logo -->
    <div class="main-nav">
      <ul class="menu">
        <li class="current_page_item"><a href="http://acjdesigns.com/">Home</a></li>
        <li class="page_item page-item-34"><a href="http://acjdesigns.com/bio">bio</a></li>
        <li class="page_item page-item-39"><a href="http://acjdesigns.com/graphics">graphics</a></li>
        <li class="page_item page-item-101"><a href="http://acjdesigns.com/photography-2">photography</a></li>
        <li class="page_item page-item-41"><a href="http://acjdesigns.com/other-works">other works</a></li>
   </ul>
</div>
</div><!-- end of #header -->

我没有将标题 div 设置为高度，所以这可能是问题所在？任何帮助都会很棒。提前谢谢！

【问题讨论】：

请同时包含您的 HTML。
我猜你需要为你的 header 元素做一个 clearfix。可能的罪魁祸首是 .main-nav 上的浮动，导致父 div 失去高度。
如你所说，如果标题在 css 中没有设置高度，那么 100% 的子级意味着 100% 没有可参考
Naturally 以百分比设置的高度仅在父元素本身具有明确的高度设置时才有效 - 否则将导致无法解决的方程式：当父元素的高度取决于其内容，但孩子的身高是父母身高的百分比……没有办法解决这种情况。

标签： html css wordpress

【解决方案1】：

您有两种通用方法：在all elements down from body 上设置height:100%;

html {height:100%;}
body {height:100%;}
...  
#header {height:100%;}

或

使用absolute positioning

#header{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 400px;
}
/* you must now move your content out of the way of the header, or it will sit on top */

#content{
  margin-left: 420px;
}

【讨论】：