Question

出于某种原因，我无法将我的左栏背景拉伸至100％高度。

这是我在css中的两个课程：

#page {
    min-height: 100%;
}

#content {
    margin: 0px auto;
    width: 100%;
    min-height:100%;
    overflow:auto;
    padding-bottom: 65px;           
}

#leftmain {
    background:url(images/leftmain.gif);
    background-size:15% 100%;
    border:1px solid #c3c2c2;
    width:15%;
    height:100% !important;
    float:left;
}

#leftmain .cssmenu {
    width:100%;
    min-height:100%;
}

#leftmain .cssmenu ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#leftmain .cssmenu ul {
    width:100%;
    position: relative;
    z-index: 597;
}

#leftmain .cssmenu ul li {
    min-height: 1px;
    width:100%;
    line-height: 1em;
    vertical-align: middle; 
}

HTML：

<div id="page">
    <div id="content>    
        <div id="leftmain>
            <div class="cssmenu">
            </div>
        </div>
        <div id="rightmain">    
        </div>    
    </div>    
</div>

如果我将min-height上的.cssmenu更改为固定height，请说明500px它会显示背景。

有什么建议吗？

Answer 1

试试这个

#leftmain { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

参考：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

您的#leftmain实际上从未达到100％的高度。这就是设置固定min-height的原因。如果所有父母本身都有#leftmain height，则100%在您的情况下只能达到其父级的100％高度。在这种情况下min-height是不够的。

您需要在this fiddle中设置height: 100%：

html,
body,
#page,
#content {
    height: 100%;
}

CSS不伸展背景100％

2 个答案: