2017-03-03 18 views
0

私は2つのdivを持っています。左メニュー用と右用コンテンツ用。左のメニューには背景画像がありますが、サイトの100%は伸びません。あなたはその子がウィンドウの全高を伸ばしたい場合100VHするためにあなたのメインラッパーの高さを設定する必要がCSS left、right div背景の問題

#main_wrapper{ 
 

 
} 
 
#main_left{ 
 
    float: left; 
 
    background: #fbfcff url("gfx/main_left_bg.jpg") repeat-y top right; 
 
    width: 210px; 
 
} 
 
#main_right{ 
 
    width: auto; 
 
    overflow: hidden; 
 
    padding: 0px 30px 0px 30px; 
 
}
<div id="main_wrapper"> 
 
    <div id="main_left"></div> 
 
    <div id="main_right"></div> 
 
</div>

+1

あなたが何を意味するのですか?背景がサイト全体に広がっている場合は、DIVにではなくbodyに割り当てる必要があります – Johannes

+0

幅を固定した210pxの値にすると100%伸びるのはなぜですか? – mnemosdev

答えて

1

#main_wrapper { 
 
    height: 100vh;; 
 
    width: 100vw; 
 
} 
 

 
#main_left { 
 
    float: left; 
 
    width: 210px; 
 
    
 
    background-image: url(http://www.planwallpaper.com/static/images/518079-background-hd.jpg); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    
 
    border-right: 1px solid white; 
 
    height: 100%; 
 
} 
 
#main_right { 
 
    float: left; 
 
    width: auto; 
 
    
 
    height: 100%; 
 
}
<div id="main_wrapper"> 
 
    <div id="main_left"></div> 
 
    <div id="main_right"></div> 
 
</div>