Dynamic vertical column with fixed header layout CSS issue

Question

I've got a screen with Movable Vertical column and a fixed menu bar in Vaadin framework. The below is SCSS query for Menu Bar. So, on keeping the width 100% the content of menu bar at extreme right side is going out of screen.

Below is code for vertical menu component

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

And At same time if I move my vertical column to left side. The menu bar is not taking up the whole screen width.

Note: The vertical menu column has a button, on which it shrink to left side of window like above image and expand on same. You cannot move/resize it using your mouse. And its similar to Valo Theme provided by Vaadin with a Header. ( demo.vaadin.com/valo-theme )

Any suggestion to fix above, will be much appreciable. Thanks in advance!

Answer 1

创建一个overflow-x:hidden类并使用body标签中的jquery切换此类。

Answer 2

Give 100% width to the parent container of menu bar and vertical column. Then split width of menu bar and vertical column as you want. Please refer this fiddle :

.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

Resolved this problem. Thank you guys for your support. Resolved it using the Vaadin layout components. @cfrick Thanks a lot man.

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

Clone of this problem