Question

这个小提琴：https://jsfiddle.net/j1tuw3vj/43/接近我想要实现的目标，但我希望中间可滚动部分（.scrollable）扩展以填充可用空间 - 无论如何什么内容位于顶部和底部的搜索栏中？占位符，无论用户窗口的高度如何。即底部搜索栏应与底部齐平。在Bootstrap环境中实现这一目标的最佳方法是什么？

＆＃13;

html,
body {
  height: 100%;
}


/* Main view, move content down due to fixed navbar. */

.main-wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding-top: 50px;
}


/* Container for a sidebar. */

.sidebar-container {
  height: 100%;
  position: fixed;
  padding: 0px;
  margin-top: -50px;
  padding-top: 50px;
  border-right: 1px solid #ddd;
}

.sidebar-header,
.sidebar-footer {
  position: relative;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}


/* Scrollable sidebar. */

.sidebar {
  height: 20%;
  position: relative;
  overflow-y: scroll;
  border-bottom: 1px solid #ddd;
}

.main-view {
  height: 100%;
  overflow: auto;
  position: relative;
  padding: 0px;
}

.nav-pills li:last-child {
  margin-bottom: 80px;
}

＆＃13;

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

    </div>
  </nav>

  <div class="main-wrapper">
    <div class="sidebar-container col-xs-3">
      <div class="sidebar-header">
        <form class="form-inline">
          <input type="text" name="search" class="form-control" placeholder="Search" />
        </form>
      </div>
      <div class="sidebar">
        <nav>
          <ul class="nav nav-stacked nav-pills">
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test</h1>
            </li>
            <li>
              <h1>Test1</h1>
            </li>
            <li>
              <h1>Test2</h1>
            </li>
            <li>
              <h1>Test3</h1>
            </li>
            <li>
              <h1>Test4</h1>
            </li>
            <li>
              <h1>Test5</h1>
            </li>
            <li>
              <h1>Test6</h1>
            </li>
          </ul>
        </nav>
      </div>
      <div class="sidebar-footer">
        <form class="form-inline">
          <input type="text" name="search" class="form-control" placeholder="Search" />
        </form>
      </div>
    </div>
    <div class="main-view col-xs-9 pull-right">
      <div class="jumbotron text-center">
        <div class="container">
          <h2>Title</h2>
          <p>Example <span class="text-danger">Text</span>.</p>
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 1

您可以将css numpy.vectorize属性用于侧边栏的高度：

z = numpy.fromfunction(numpy.maximum, (2, 2), dtype=int)

calc

其中130px是底部搜索框的高度。

Answer 2

对此没有特定的Bootstrap方法。我认为最好的方法是将侧边栏设置为flexbox列。

http://www.codeply.com/go/gRvmeccRbQ

/* Container for a sidebar. */
.sidebar-container {
    height: 100%;
    position: fixed;
    padding: 0px;
    margin-top: -50px;
    padding-top: 50px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}

/* Scrollable sidebar. */
.sidebar {
    flex-grow: 1;
    position: relative;
    overflow-y: scroll;
    border-bottom: 1px solid #ddd;
}

Answer 3

您可以使用display:flex来实现此目的。所以你的CSS会改为：

.sidebar-container {
  display:flex;
  flex-flow:column;
    height: 100%;
    position: fixed;
    padding: 0px;
    margin-top: -50px;
    padding-top: 50px;
    border-right: 1px solid #ddd;

}

.sidebar {
  display:flex;  
    position: relative;
    overflow-y: scroll;
    border-bottom: 1px solid #ddd;
}

在这里工作小提琴：https://jsfiddle.net/gurtejsingh/j1tuw3vj/44/

希望这会有所帮助。欢呼声。

Answer 4

尝试更改CSS以包含以下内容 - 它将第二个滚动定位在可见窗口的底部，然后离开滚动部分以根据剩余的可见窗口高度计算其高度：

.sidebar-header {
    position: relative;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  height = 100px;
}

.sidebar-footer {
  position: fixed;
  bottom: 0;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  height = 100px;
}

/* Scrollable sidebar. */
.sidebar {
    position: relative;
    overflow-y: scroll;
    border-bottom: 1px solid #ddd;
  height: calc(100% - (130px+130px)); 
}

全高3排侧边栏，可变尺寸中排

4 个答案: