0

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

人们建议在父 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，以备不时之需。

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

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

4

2 回答 2

5

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

于 2012-12-20T16:23:09.943 回答
0

不确定您是否解决了问题，但如果有人没有：当您有一个背景图像或颜色要在页面中一直重复，但在该页面中您有不同长度的列时，唯一的实现这一点的方法是将背景图像或颜色放在容器中，然后容器将容纳不同长度的列。所述列将根据您放入其中的内容量向下扩展。容器内最长的 div 将使背景图像重复-y（向下）或颜色。

所以你的结构看起来像这样：

<div id="container"> <!--which is the #1 element in your body--> 
<div id="leftcolumn"> Your side-nav would go here</div>    
<div id="rightcolumn">Your main content which is usually longer 
than the menu will go here</div>
</div><!-- end container-->

显然，在这种情况下，您的页眉和页脚 div 将放置在容器 div 之外，并且可能需要进入另一个包装器 div 以保持所有内容居中。

例如，使用以下 CSS，它就可以正常工作：

<style> 
html,
body {
  height:100%;
   background-color : #103C52; /* or whatever you like*/
}
#container {
  height:100%;
  background-color: green; /* or whatever you like*/
}
#leftcolumn {
  height:100%;
  width: 16.67%; /* or whatever you like*/
  background-color: red; /* or whatever you like*/
  float: left;
}
#rightcolumn {
  height:100%;
  width: 80%; /* or whatever you like*/
  overflow-x: hidden; /* or whatever you like*/
  overflow-y: scroll; /* or whatever you like*/
  background-color: blue; /* or whatever you like*/
  float: left;
}

</style>

如果不清楚，请发布您到目前为止所拥有的内容，我会看看它......;）

于 2013-03-21T07:21:07.883 回答