具有固定标题布局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)
}

克隆了这个问题