具有固定標題布局CSS問題的動態垂直列

Question

我有一個帶有Movable Vertical列的屏幕和一個Vaadin框架中的固定菜單欄。 以下是菜單欄的SCSS查詢。 因此，在保持寬度100％時，最右側菜單欄的內容將超出屏幕。

下面是垂直菜單組件的代碼

private Component buildContent(HierarchicalContainer con) {
    menuContent=new CssLayout();
    menuContent.addStyleName("sidebar");
    menuContent.addStyleName("menuscroll");
    menuContent.addStyleName("no-vertical-drag-hints");
    menuContent.addStyleName("no-horizontal-drag-hints");
    menuContent.setWidth(null);
    menuContent.setHeight("100%");
    return menuContent;
}

如果我將垂直柱移動到左側，同時也是如此。 菜單欄不占用整個屏幕寬度。

注意：垂直菜單欄有一個按鈕，在其上縮小到窗口的左側，如上圖所示，並在其上展開。 您無法使用鼠標移動/調整大小。 它類似於Vaadin提供的Valo主題和標題。 （ demo.vaadin.com/valo-theme ）

任何修改上述建議都會非常明顯。 提前致謝！

Answer 1

創建一個overflow-x:hidden類並使用body標簽中的jquery切換此類。

Answer 2

為菜單欄和垂直列的父容器提供100％的寬度。 然后根據需要分割菜單欄和垂直列的寬度。 請參考這個小提琴 ：

.container {
 width: 100%;
 height: 100%;
 }
 .header {
 width: 80%;
 display: inline-block;
 position: fixed;
 z-index: 100;
 top: 0;
 height: 70px;
 background-color: blue;
 }
 .vertical-bar {
  display: inline-block;
  width: 20%;
  background-color: #000;
  height: 600px;
 }

<div class="container">
<div class="vertical-bar">
</div>
<div class="header"></div>
</div>

Answer 3

解決了這個問題。 謝謝你們的支持。 使用Vaadin布局組件解決了它。 @cfrick非常感謝。

class MyUI extends UI {

protected void init(com.vaadin.server.VaadinRequest request) {
    final headerLayout = new VerticalLayout(new Label('HEADER'))
    final footerLayout = new VerticalLayout(new Label('FOOTER'))

    final contentLayout = new VerticalLayout()
    80.times{ contentLayout.addComponent(new Button("TEST $it")) }
    // XXX: place the center layout into a panel, which allows scrollbars
    final contentPanel = new Panel(contentLayout)
    contentPanel.setSizeFull()

    // XXX: add the panel instead of the layout
    final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
    mainLayout.setSizeFull()
    mainLayout.setExpandRatio(contentPanel, 1)
    setContent(mainLayout)
}

克隆了這個問題