html - 两行布局 - 固定顶部和可滚动底部

Question

我正在尝试将一个 div 容器拆分为两个垂直部分 60%、40%。

我的顶部 div(即 60%)应该始终可见。如果元素超过其限制，我的底部 div (40%) 应该是可滚动的。

我能得到的最好结果是基于此:算法的 JSFiddle 取自 this post .但是在浪费了很多时间之后，我无法实现我的目标。

我将附上一张图片以供说明:

Answer 1

您可以对每个部分使用 absolute 定位，并使用 top/bottom 属性正确定位绝对定位的部分。

在这种情况下，顶部部分通过 top: 0; 和 #bottom< 的 top 属性的值粘在页面顶部 元素设置为 60%，其中 60% 是 #top 元素的高度。 top: 60%; 声明强制 #bottom 位于 #top 下方。

另外，为了使 #bottom 可滚动，您可以使用 overflow-y或 overflow该元素的值为 auto 的属性。

11.1. The ‘overflow’, ‘overflow-x’ and ‘overflow-y’ properties

These properties specify whether content is clipped when it overflows the element's content area. overflow-x determines clipping at the left and right edges, overflow-y at the top and bottom edges. overflow is a shorthand. If it has one keyword, it sets both overflow-x and overflow-y to that keyword.

auto The behavior of the ‘auto’ value is UA-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

WORKING DEMO

#top {
  position: absolute;
  top: 0;
  height: 60%;
  width: 100%;
}

#bottom {
  position: absolute;
  top: 60%;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}