Question

我现在已经在这个问题上挣扎了一个多小时，而我却无法做到这一点。

<div class="main">
    <div class="header">This is the header</div>
    <div class="content">
        <div class="top-container">This is the top content container</div>
        <div class="bottom-container">
            <div class="scroll-container">
                This is the container that scrolls
                 ...
            </div>
        </div>
    </div>
</div>

该页面分为2个部分。标题和内容div。内容又分为两部分。顶部和底部容器。当内容太大而无法在屏幕上显示时，我想让底部容器可滚动。

这意味着底部容器在顶部容器下滚动。内容容器中的标头容器和顶部容器不应移动。滚动条应该只在底部容器中，而不是在整个页面上。

我怎样才能完成这项工作？

[编辑]

使其更清晰。内容/底部容器div的高度未知，％和 px 。

我已经进一步了解：updated Fiddle

Answer 1

<div class="bottom-container" style="height:50%; overflow:auto;">
//use overflow= auto to make it scroll

我认为这会对你有帮助。

只需在想要拥有滚动标签的每个div中使用溢出

Answer 2

为顶部和底部容器应用50%。

.top-container {
position: relative;
background-color: blue;
height:50%;
}
.bottom-container {
background-color: grey;
position:relative;
overflow: auto; 
height:50%;
}

DEMO

Answer 3

Fiddle answer

我使底部容器用

填充剩余空间

position:relative;
display:table-row;
height: 100%;

然后使用

设置滚动容器的边界

position: absolute;
top: 50px; /* Set the top because the top container is within the boundaries */
bottom: 0;
left: 0;
right: 0;
overflow-y: auto; /* only y-scroll when neccesary */
overflow-x: hidden;

我仍然不满意这个修复，因为我需要将顶部设置为顶部容器的高度。如果有人有解决此问题的建议，请告诉我们！

[编辑]

Fiddle update

修复了滚动容器周围包装器的问题。底部容器现在设置所有底层元素的边界，滚动容器填充空间以滚动。

.bottom-container {
    position: absolute;
    top: 0px;
    width: 100%;
    bottom: 0px;
}
.scroll-container-wrap {
    position:relative;
    display:table-row;
    height: 100%;
}

如何在div滚动内创建一个div（页面的最大底部）

3 个答案: