【问题标题】:Bootstrap fully 100% height with a sidebar使用侧边栏引导完全 100% 高度
【发布时间】:2013-09-07 05:03:16
【问题描述】:

我不明白为什么右边的侧边栏高度不是100%,而且当我向下滚动页面时,背景被中断了。

<nav id="nav" class="nav-primary hidden-xs nav-vertical">
<ul class="nav affix-top" data-spy="affix" data-offset-top="50">
<li><a href=""><i class="icon-user"></i> Профиль</a></li>
<li><a href=""><i class="icon-bar-chart"></i> Финансы</a></li>
<li><a href=""><i class="icon-sitemap"></i> Товары</a></li>
<li><a href=""><i class="icon-signal"></i> Товары (статистика)</a></li>
<li><a href=""><i class="icon-envelope-alt"></i> Уведомления (10)</a></li>
</ul>
</nav>

生活例子here

【问题讨论】:

  • 您是在 IE 中查看吗?在 Chrome 中看起来不错。此外,如果您希望高度为 100%,请确保在 CSS 中设置:html, body{height: 100%;}
  • 在 Chrome 中。我正在添加问题的屏幕截图。
  • 查看 Bootstrap 3 的固定/流动侧边栏示例:bootply.com/108605

标签: html css twitter-bootstrap height sidebar


【解决方案1】:

几件事。

  1. 您在 CSS 中为 #nav 设置了两个 position 属性。
  2. 你应该只有一个,应该是position:fixed
  3. 不需要top: 0; left: 0bottom: 0; 如果对象是100% 高度并固定在左上角,它总是会接触到底部。

CSS 应该是:

#nav {
  position:fixed;
  width: 200px;
  z-index: 1000;
  left: 0;
  top: 0;
  border-right: 1px solid #162636;
  height: 100%;
}

【讨论】:

    【解决方案2】:

    侧边栏的高度是 100%,但是,当您向下滚动页面时,页面的高度会超过 100%。侧边栏的高度不会增加以匹配页面的高度。因此,将侧边栏的 position 属性更改为 position:fixed 可能会有所帮助。

    【讨论】:

      猜你喜欢
      • 2012-07-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多