固定ヘッダーレイアウトの動的垂直列CSSの問題

Question

私はVaadinフレームワークでMovable Vertical列と固定メニューバーを持つ画面を持っています。以下は、メニューバーの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; 
} 

と同時にためのコードです。メニューバーは画面全体の幅を占めていません。

注：垂直メニュー列は、それが上記のような画像ウィンドウの左側に収縮し、同じに展開たボタンを有しています。マウスを使って移動/サイズ変更することはできません。ヴァーダンがヘッダー付きで提供しているバロ・テーマに似ています。 （demo.vaadin.com/valo-theme）

上記の問題を解決するには、相当な評価が必要です。 ありがとうございます！

Answer 1

クラスをoverflow-x:hiddenにして、bodyタグのjqueryでこのクラスを切り替えます。

Answer 2

メニューバーと垂直列の親コンテナに100％の幅を与えます。次に、メニューバーと垂直カラムの幅を必要に応じて分割します。これを参照してください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

この問題は解決しました。皆さん、ご支援いただきありがとうございます。 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) 
} 

Clone of this problem