Question

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

人们建议在父div上设置一个高度，因为身高：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。

Answer 2

不确定您是否已解决问题，但如果有人不解决：当你想要在页面上一直重复的背景图像或颜色，但在那个页面中你有不同长度的列，唯一的方法是将背景图像或颜色放在容器中然后保持不同长度的列。所述列将根据您放入其中的内容量向下扩展。容器内最长的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>

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

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

2 个答案: