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

Question

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

人们建议在父 div 上设置高度，因为 height: 100%;不知道 100% 是什么。但是 parent 的高度怎么知道 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。