布局有两排 - 固定顶部和可滚动底部

Question

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

我的顶级div（60%）应始终可见。如果项目超出限制，我的底部div（40%）应该是可滚动的。

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

我会附上一张图片以供说明：

Answer 1

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

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

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

  

<强> overflow

     

这些属性指定内容在溢出时是否被剪裁   元素的内容区域。 overflow-x确定裁剪时间   左右边缘，overflow-y位于顶部和底部边缘。 overflow是一种速记。如果它有一个关键字，则会为该关键字设置overflow-x和overflow-y。

     

auto 'auto'值的行为与UA有关，但应该导致为溢出提供滚动机制   框。

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

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

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

Answer 2

您的HTML应该是这样的（仅用于示例）：

<div class="ColumnContainer">
    <div class="FixedItem">
        Fixed
    </div>
    <div class="ScrollContainer">
        <div class="ScrollContent">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </div>
    </div>
</div>

这里的关键是CSS：

.ColumnContainer {
    position:relative;
}

.ScrollContainer {
    position:relative;
    height:200px; /* must set fixed height */
    overflow:auto;
}

通过在容器上设置一个固定的高度，并让一个孩子将所有内容片段作为子元素，它会在溢出时强制滚动。

Here is a jsFiddle as an example.