基本標題 - 中心 - 頁腳佈局Vaadin

Question

我已到處尋找這個特定問題的答案，但沒有發現任何用處。我試圖在Vaadin中創建一個非常簡單的佈局，這在許多網站（包括這一個）上都很常見。我已經包含了這個問題的圖表。基本上需要一個頁腳始終保持放在主要部分之後，如果主要部分很大，滾動條將出現並允許我滾動到底部。如果內容很小，頁腳通常會在主要部分之後出現。如果瀏覽器窗口很小，頁腳將不會與主要部分重疊（這是我卡住的地方）。我試過這麼多方法，但似乎沒有任何工作100％...我想避免與CSS文件搞亂（如果可以的話），只使用Java ... 謝謝！

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

Answer 1

我已經返工我的代碼，並使用具有動態內容和頁腳標籤頁的念頭放棄了。相反，我正在使用一個簡單的菜單，並且我已經將組件層次顯着展平，現在一切似乎都按預期工作。

Answer 2

我喜歡爲此使用絕對位置。這裏是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 3

嘗試BorderLayout插件。 它應該做你需要什麼， 只要確保把正確的組件中的主要部分，使顯示滾動條需要

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

Answer 4

例如，當，（注意代碼的註釋，我不知道如果你想要一個絕對的或固定的佈局）

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. 

Answer 5

這應做到：

mainVLayout.setSizeFull(); 

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

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