Question

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

＆＃13;

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

＆＃13;

<div id="main_wrapper">
  <div id="main_left"></div>
  <div id="main_right"></div>
</div>

＆＃13;

Answer 1

如果您希望其子项拉伸窗口的整个高度，则必须将主包装器的高度设置为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>

CSS左，右div背景问题

1 个答案: