0

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

这是我的 CSS 中的 2 个类：

#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-heighton更改.cssmenu为固定height，可以说它500px显示背景。

有什么建议么？

4

2 回答 2

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/

于 2013-04-19T04:01:32.667 回答
0

你#leftmain实际上从来没有达到 100% 的高度。这就是为什么设置一个固定的min-height作品。#leftmain在您的情况下，如果所有父母本身都height具有100%. min-height在这种情况下是不够的。

你需要height: 100%像这个小提琴一样设置：

html,
body,
#page,
#content {
    height: 100%;
}
于 2013-04-19T04:14:47.077 回答