CSS左，右div背景问题

Question

我有两个 div。一个用于左侧菜单，一个用于右侧的内容。左侧菜单有背景图片，但不会 100% 拉伸(stretch)网站。

#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>

Answer 1

如果您希望主包装器的子包装器拉伸(stretch)整个窗口的高度，则必须将主包装器的高度设置为 100vh。

#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>