HTML和CSS:使用垂直滚动条水平拆分页面

Question

我找不到如何做一些非常简单的事情.我想将页面水平划分为两个窗格.在窗格之间有一些边界(可以调整大小或不重视我不在乎).上部窗格可以垂直滚动,而下部窗格保持固定.

我试过bootstrap粘固定页脚,但我没有顶部的卷轴.

我最终的目标是在底部固定窗格中插入所有类型的链接,这将有助于导航到顶部窗格中的位置.

提前致谢

Answer 1

这是一个选项,您的元素将占据整个屏幕.如果你想将它们的大小限制为bootstrap容器,你需要将它们放在容器中并赋予它样式position:relative

<div class="upper">This will scroll</div>
<div class="lower">This will not</div>


.upper, .lower {
  position: absolute;
  left: 0;
  right: 0;
}

.upper {
  top: 0;
  height: 50%;
  background-color: pink;  
  overflow:scroll;
}

.lower {
  bottom: 0;
  height: 50%;
  background-color: blue;    
}

小提琴:http://jsfiddle.net/jGBh3/