html - 使 div 粘在页面底部但保持流动

Question

好的，我将首先从一张图片和代码开始，以便更好地解释我的问题。

<div class="overall">
    <div class="areas">
        <div class="area">
            Area 1
        </div>
        <div class="area">
            Area 2
        </div>
        <div class="area">
            Area 3
        </div>
    </div>
    <div class="log">
        <div class="logheader">
            Logheader
        </div>
        <div class="logbody">
            Logbody
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
            <div>Test</div>
        </div>
    </div>
</div>


body, html {
    max-height: 100vh;
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.area, .logheader {
    height: 72px;
}

div {
    border: 1px solid lightgrey;
}

.log {
    height: 572px;
    border: 1px solid black;
}

.logbody {
    height: 500px;
    overflow: auto;
}

.areas {
    overflow-y: scroll;
    border: 1px solid blue;
}

.overall {
    max-height: 100vh;
}

所以我需要实现的(仅使用 CSS)首先是日志部分始终直接位于区域部分下方。一旦浏览器窗口变小并且浏览器窗口的底部“接触”到日志部分的底部，日志部分就应该附着在浏览器窗口的底部。当浏览器窗口的高度进一步降低时，日志部分应保持其固定大小，区域部分应通过滚动条变小。只有区域部分应该有一个滚动条(一旦它对于内容来说太小了)并且日志正文也应该有一个，正如您已经从屏幕截图中看到的那样。但是页面本身永远不应该有滚动条，这就是为什么整个页面的最大高度设置为 100vh 的原因。

您在代码中看到的是我迄今为止尝试过的，但这并没有按预期工作。

编辑:正如每个人都在说，如果没有 JS 等，这将无法工作。我应该补充一点，稍后我将不得不在 GWT 中使用它，所以有谁知道如何使用 GWT 做到这一点？

Answer 1

一个有点反常的方法是 - 在 gwt 中你可以使用浏览器事件的监听器 -

http://www.gwtproject.org/javadoc/latest/com/google/gwt/dom/client/BrowserEvents.html#CHANGE

然后你可以通过----获取浏览器的高度和宽度

http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html

-- Window.getClientHeight() -- 窗口.getClientWidth()

对于日志部分，您可以通过 - 设置滚动面板大小

 Window.getClientHeight().