基本页眉 - 中心 - 页脚布局 Vaadin答案

【问题标题】：Basic Header - Center - Footer Layout Vaadin基本页眉 - 中心 - 页脚布局 Vaadin
【发布时间】：2014-10-05 02:15:42
【问题描述】：

我到处寻找这个特定问题的答案，但没有发现任何有用的东西。我正在尝试在 Vaadin 中创建一个非常简单的布局，这在许多网站（包括这个）上都很常见。我在这个问题中附上了一张图表。基本上需要一个页脚始终放在主要部分之后，如果主要部分很大，则会出现一个滚动条并允许我滚动到底部。如果内容很小，页脚仍然会正常出现在主要部分之后。如果浏览器窗口很小，页脚将不会与主要部分重叠（这是我卡住的地方）。我已经尝试了很多方法，但似乎没有任何方法可以 100% 起作用……我想避免弄乱 CSS 文件（如果可以的话），只使用 Java…… 谢谢！

https://vaadin.com/documents/portlet_file_entry/10187/layout.JPG/7a978ae7-f926-472d-b1a1-d0aa3f2c3536

【问题讨论】：

标签： css layout vaadin vaadin7

【解决方案1】：

试试 BorderLayout 插件。它应该做你需要的，只需确保在主要部分放置正确的组件，以便在需要时显示滚动条

https://vaadin.com/directory#addon/borderlayout:vaadin

【讨论】：

问题是我不希望内容部分无限扩展。

【解决方案2】：

例如，（注意代码中的注释，不知道你要绝对布局还是固定布局）

public class BoxApp extends UI {

    HorizontalLayout head = new HorizontalLayout();
    Panel main = new Panel();
    HorizontalLayout footer = new HorizontalLayout();

    @Override
    protected void init(VaadinRequest request) {
        main.setStyleName(Reindeer.PANEL_LIGHT);
        head.addComponent(new Label("head"));
        main.setContent(new Label("<pre>MAIN START\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\\n" + 
            "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" +
            "\n\n\n\n\n\n\n\n\nMAIN END</pre>", ContentMode.HTML));
        footer.addComponent(new Label("footer"));

        VerticalLayout form = new VerticalLayout();
        form.setMargin(false);
        form.setSpacing(false);
        head.setHeight(50, Unit.PIXELS);
        form.addComponent(head);
        form.setExpandRatio(head, 0);
        main.setHeight(100, Unit.PERCENTAGE);
        form.addComponent(main);
        form.setExpandRatio(main, 10);
        footer.setHeight(50, Unit.PIXELS);
        form.addComponent(footer);
        form.setExpandRatio(footer, 0);
        // Drop following line if you don't want a fixed layout
        form.setSizeFull(); 

        this.setContent(form);
    }
}

使用JDALBoxFormBuilder（我写的）构建根组件的语法更清晰一些

BoxFormBuilder fb = new BoxFormBuilder(); 
fb.setDefaultWidth(BoxFormBuilder.SIZE_FULL);
fb.row(50);                             // new row for head
fb.add(head);
fb.row(BoxFormBuilder.SIZE_FULL);       // new row for main, full height
fb.add(main);
fb.row(50);                             // new row for footer
fb.add(footer);

Component form = fb.getForm();          // Build the component.

【讨论】：

非常感谢，我的主要问题是我的主要问题是之前的 HorizontalLayout。使用 main 作为面板并在该面板内添加 HorizontalLayout 效果很好。谢谢你:)
在对它进行了更多测试之后，它并不是我想要的（它非常接近）。我正在寻找这样的东西，templateaccess.com/demos/kaleidoscope-html 简单的表格网站。现在如果主要部分太大，我会得到一个滚动条（页脚总是全尺寸）。
我有一个标签页，其主要部分的组件大小可变，最终发生的是标签页被绘制，页脚组件最终与标签页重叠。

【解决方案3】：

我喜欢为此使用绝对位置。这是 JSFIDDLE：http://jsfiddle.net/upau942y/ 您可以使用 margin-top 在您的页脚和网站内容之间创建一个间隙。

<footer>
    <div class="footer-content">
        <div class="footer-left">
            <p>some content</p>
            <p>Thank you for viewing the site!</p>
        </div>
    </div>
</footer>

Footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #000;
  margin-top: 2rem;
}

【讨论】：

JSFIDDLE 很酷 :) ...所以我不得不乱用 html 和 CSS ...没有 Vaadin 特定的方式？
我不知道 Vaadin，我上面写的代码可以在任何框架上工作，并且很容易实现。希望对您有所帮助。
好的，但是必须在某个时间点或另一个点将其呈现为 html，浏览器不读取 java，它们读取 html。所以必须有一个自定义html的选项。
如果我找不到 Vaadin 特定的方式，我会按照你的建议去做。

【解决方案4】：

应该这样做：

mainVLayout.setSizeFull();

mainVLayout.addComponent(headerComponent);
mainVLayout.addComponent(contentPanel);
mainVLayout.addComponent(footerComponent);

mainVLayout.setExpandRatio(contentPanel, 1);//this is the key.

【讨论】：

有趣的是，您可以使用所有三个部分的组件来代替布局。我会试一试...
所以这个解决方案差不多了，问题是这种情况下的 contentPanel 可以显着扩展，所以如果你有一个大屏幕和很少的内容，你最终会得到很多空白。但我想这对所有网站来说都是正常的，我只需要添加很多内容......
我好像被卡住了......对我来说最大的问题是 contentPanel 需要保存一个标签页，其中包含大小可变的组件。最终发生的是标签页最终被填充并且页脚与标签页重叠而不是被添加到下面。
Matt，你能把屏幕截图和代码 sn-ps 贴出来吗？
不幸的是，我重新编写了代码并放弃了使用标签表的想法。相反，我使用了一个简单的菜单并显着展平了我的组件层次结构，现在一切似乎都按预期工作。不过谢谢...

【解决方案5】：

我重新编写了我的代码并放弃了使用带有动态内容和页脚的选项卡表的想法。相反，我使用的是一个简单的菜单，并且我已经显着扁平化了我的组件层次结构，现在一切似乎都按预期工作。

【讨论】：