100% 的高度不适用于侧面导航

Question

在我的一生中，我无法将侧面导航扩展到页面底部。我用谷歌搜索了这个并查看了许多其他与此相关的堆栈溢出问题，但没有任何帮助。

人们建议在父 div 上设置一个高度，因为 height: 100%; 不知道100%是什么。但是父母的身高怎么知道100%是多少呢？

我也不能使用任何“固定”或“绝对”定位，因为这似乎完全破坏了 Twitter Bootstrap 的响应能力。

这是我的代码：

    <div id="secondary">
    <div class="span10" style="background-color: #860038; min-height: 100%; overflow: hidden;">
      <ul class="side-nav">

        <?php if (!empty($secondary_menu)): ?>

            <?php foreach ($secondary_menu as $key => $menu): ?>

                <?php $active = ($this->uri->segment(2,'index') == $key)? 'side-box-active': 'side-box'; ?>

                <li class="<?= $active ?>"><a href="<?= base_url().$primary_menu.'/'.$menu['link']?>"><?= $menu['label']?></a></li>
            <?php endforeach ?>
        <?php endif ?>
      </ul>
    </div>
</div>

因此，上面的代码在我的应用程序中动态创建了我的侧面导航。我正在使用 Twitter Bootstrap，在 div class="span10" 上我将背景颜色设置为侧面导​​航和最小高度：100%。（也溢出：隐藏）。

目前正在做的是创建我的容器，但它会在导航停止时立即切断，而不是扩展到页面底部。

正如你所看到的，我设置了一个 ID=“secondary” 的父 div，以备我们需要时使用。

屏幕截图显示了侧面导航。我需要栗红色扩展到屏幕底部。划开它可以让您发布图片，然后解释它们，然后告诉您不能发布图片:) 抱歉，我猜没有图片。

感谢您提前提供的任何帮助。

Answer 1

为了使 100% 高度发挥作用，父元素也需要 100% 高度，包括html和body。