Html 带有固定标题布局的动态垂直列CSS问题

我有一个屏幕，在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;
}

同时如果我把我的垂直柱移到左边。菜单栏没有占据整个屏幕宽度

注意：垂直菜单列有一个按钮，在该按钮上它收缩到窗口的左侧，如上图所示，并在同一个窗口上展开。无法使用鼠标移动/调整其大小。和瓦丁提供的瓦洛主题相似，有一个标题。（）

任何修复上述问题的建议，都将是非常可观的。

---

提前谢谢

创建一个

overflow-x:hidden

类，并使用jquery-in-body标记切换该类。

创建一个

overflow-x:hidden

类，并使用jquery-in-body标记切换该类。

为菜单栏和垂直列的父容器提供100%的宽度。然后根据需要拆分菜单栏和垂直列的宽度。请参阅：

.container{
宽度：100%；
身高：100%；
}
.标题{
宽度：80%；
显示：内联块；
位置：固定；
z指数：100；
排名：0；
高度：70像素；
背景颜色：蓝色；
}
.竖条{
显示：内联块；
宽度：20%；
背景色：#000；
高度：600px；
}

为菜单栏和垂直列的父容器提供100%的宽度。然后根据需要拆分菜单栏和垂直列的宽度。请参阅：

.container{
宽度：100%；
身高：100%；
}
.标题{
宽度：80%；
显示：内联块；
位置：固定；
z指数：100；
排名：0；
高度：70像素；
背景颜色：蓝色；
}
.竖条{
显示：内联块；
宽度：20%；
背景色：#000；
高度：600px；
}

解决了此问题。谢谢你们的支持。使用Vaadin布局组件解决了此问题@谢谢你，伙计

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

---

解决了这个问题。谢谢你们的支持。使用Vaadin布局组件解决了此问题@谢谢你，伙计

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

---

质疑css和html代码共享您的代码，以便我们更好地了解您的错误所在。我使用的是vaadin，因此没有相同的html代码。对于CSS，我在图片中提到过。你无法从你的问题中得到有效的帮助。没有任何关于结构以及如何通过CSS设置整个布局的内容。你的左栏怎么站在这里？浮动、位置、显示……是否为标题的同级，正文的直接子项。。。。屏幕截图是有用的，我们需要查看将所有组件组合在一起的代码。这可能是因为菜单栏或其父布局有固定的宽度，或者其他问题。请共享您的代码，以便我们更好地了解您的错误。我使用的是vaadin，因此没有相同的html代码。对于CSS，我在图片中提到过。你无法从你的问题中得到有效的帮助。没有任何关于结构以及如何通过CSS设置整个布局的内容。你的左栏怎么站在这里？浮动、位置、显示……是否为标题的同级，正文的直接子项。。。。屏幕截图是有用的，我们需要查看将所有组件组合在一起的代码。这可能是因为菜单栏或其父布局具有固定宽度或其他原因