Question

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

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

Answer 1

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

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

Answer 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);
    }
}

使用JDAL BoxFormBuilder（我写的）构建根组件的语法更清晰

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.

Answer 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;
}

Answer 4

这应该这样做：

mainVLayout.setSizeFull();

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

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

Answer 5

我已经重新编写了代码并放弃了使用包含动态内容和页脚的标签页的想法。相反，我使用的是简单的菜单，而且我的组件层次结构显着变平，现在一切似乎都按预期工作了。

基本标题 - 中心 - 页脚布局Vaadin

5 个答案: