可变尺寸中排的全高3排侧栏

这个小提琴：https://jsfiddle.net/j1tuw3vj/43/已经接近我想要实现的目标，但我希望中间的可滚动部分（.scrollable）可以展开以填充可用空间 - - 没有事情是在顶部和底部的“搜索栏”占位符是什么内容，也不管用户的窗口是什么高度。即底部的搜索栏应该与底部齐平。在Bootstrap上下文中实现此目的的最佳方式是什么？可变尺寸中排的全高3排侧栏

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; 
 
}

<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>

来源

2017-04-10 Kev

是不是真的是这个特定的引导方法。我认为最好的办法是让侧边栏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; 
}

来源

2017-04-10 11:37:16 ZimSystem

你可以使用CSS calc属性栏的高度：

.sidebar { 
height: calc(100% - 130px); 
}

jsfiddle

哪里130px是底部搜索框的高度。

来源

2017-04-10 11:34:57 sol

这有一个非常有趣的副作用，无论在什么样的底行的像素高度 - 即使它是不正确 - 这看起来还是如何，我们希望它。 – Kev

你可以使用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/

希望这有助于。干杯。

来源

2017-04-10 11:38:03

试着改变你的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)); 
}

来源

2017-04-10 11:53:28 Nikkorian

第二涡管？为什么？ – Kev

@Kev - 我太草率 - 我的意思是“搜索栏”。 – Nikkorian

可变尺寸中排的全高3排侧栏

回答

相关问题