Question

我希望有一个全高的侧边栏（参见示例中的#left），同时仍然有一个页脚，使用引导框架。

我已经尝试了以下内容，但它并非“页脚友好”。目标是使侧边栏具有100％的页面高度。

#left {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
}

Answer 1

您可以在行上设置display: flex;，视口宽度大于992px

@media (min-width: 992px) {
  .row {
      display: flex;
  }
}

FIDDLE

NB：这可能会破坏布局的其他部分，因此如果需要 - 您可以使选择器更具体，以便只选择您想要全高的行。

Answer 2

试试这个

body {
      overflow: hidden;
}    

#left {
      background-color: #aaa;
      padding-bottom: 99999px;
      margin-bottom: -99999px;
}

.footer {
    position: relative;
    z-index: 99;
    background: #fff;
}

使用包装器（例如：<div class="wrapper"></div> css for it .wrapper { overflow: hidden; }）或其他类/ id并使用overflow：hidden样式。

Answer 3

我可能有另一种思维方式。 Bootstrap具有设置行和列的类。

count()

尝试为您的网页探索正确的课程编号，使其成为快速响应的网站。感谢。

Answer 4

解决方案很简单。您使用的代码完全没问题。

<强>更新

#left {
    position: absolute; //changed from fixed
    top: 51px;
    left: 0; // removed bottom:0;
    z-index: 1000;
    display: block;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: pink;
    border-right: 1px solid #eee;
}

您只需要对其他人进行一些小的更改，即可从此处获得所需的结果。假设当你说100％时，你的意思是排除顶部导航栏。

1）您只需使用id="main"向右推float: right; div，使其适合布局，而不是隐藏在#left侧边栏后面。像这样

#mid {
  float: right; //added
  background: #666;
}

2）对于你的页脚问题，罪魁祸首是<footer>部分的位置。如果您希望侧边栏延伸到全高，即使是页脚之外。您应该将其放在内容下方的#main div内。

Latest Fiddle

Answer 5

您可以使用CSS，但该解决方案存在缺陷。 Flexbox仍然存在浏览器兼容性问题。

使用jQuery有一个简单的解决方案。你只需要编写几行代码。

首先创建一个函数：

function sidebarHeight() {
  var containerHeight = $('.main-content').height();
  $('.sidebar').height(containerHeight);
}

然后在页面加载和浏览器调整大小时运行该功能。

$(window).load(sidebarHeight);
$(window).resize(sidebarHeight);

如果您想阅读完整的详细信息，我在Blog上写了一个教程。以下是Codepen.io上的演示。

Answer 6

尝试position: absolute代替position: fixed。

全高边栏与页脚在Bootstrap中

6 个答案:

FIDDLE