Question

好的，我首先从图像和代码开始，这样我就能更好地解释我的问题。

enter image description here

<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）首先，日志部分始终直接位于区域部分之下。一旦浏览器窗口变小，浏览器窗口的底部就会触及＆＃34;在日志部分的底部，日志部分应该附加到浏览器窗口的底部。当浏览器窗口的高度进一步降低时，日志部分应保持其固定大小，并且区域部分应使用滚动条变小。只有区域部分应该有一个滚动条（一旦它对于内容来说太小），日志正文也应该有一个，你可以从截图中看到。但页面本身不应该有滚动条，这就是整个页面的最大高度设置为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（） - Window.getClientWidth（）

对于日志部分，您可以通过 -

设置滚动面板大小

 Window.getClientHeight().

Answer 2

此设计可以使用所有现代浏览器都支持的flex-box layout model来实现。

如果您需要支持非常旧的浏览器，则必须使用在GWT中实现RequiresResize接口的面板，并在调整窗口大小或加载新内容时重新计算滚动面板的高度。

Answer 3

（1）使用媒体查询应该可以使用纯CSS：CSS3 @media Rule

（2）当你打算使用GWT时，还有另一个解决方案：

首先，Window GWT Window (JavaDoc)包含您需要的所有代码。

使用 addResizeHandler 来侦听调整大小事件。在调整大小时，使用 getClientHeight 和 getClientWidth 来检查所需的尺寸。

以任何一种方式：

一旦视口维度很小，请在您喜欢的父元素（甚至元素本身）上使用替代（辅助）css-tag。然后，此css-tag将根据您的需要更改元素position-attribute（即position：fixed）

Answer 4

你绝对可以用GWT和CSS做到这一点。我正在搞乱GWT并创建了一个测试页面（抱歉，图片上传不起作用）。

基本上，如果我调整窗口的大小，中心的内容会缩小，页脚将保持在它所属的位置，并保持相同的高度和宽度。

首先我必须在CSS中执行此操作：

body {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

然后，在我的Java代码中，我将HorizontalPanel添加到另一个HorizontalPanel，然后将一个小部件添加到父GridPanel中，其作用类似于页脚。然后我将HorizontalPanel的高度和宽度设置为100％。然后我将widget（页脚）css属性宽度设置为border-box，高度设置为50px。

GWT还包含可以直接应用于Java代码的WindowResizeListeners和高度/宽度getter。使用类似的东西：

public void onWindowResize() {

    HorizontalPanel hp = new HorizontalPanel();    

    int height = Window.getClientHeight();
    int width = Window.getClientWidth();

    hp.setHeight(height);
    hp.setWidth(width);
}

这样您就可以更改面板与窗口相比的高度和宽度，同时保持另一个不受影响。

将div粘贴到页面底部但留在流程中

4 个答案: