在水平滑动网站中将内容 div 设置为 100% 的问题答案

【问题标题】：Problems getting content div to 100% in horizontal sliding website在水平滑动网站中将内容 div 设置为 100% 的问题
【发布时间】：2012-01-16 15:54:22
【问题描述】：

我有一个带有固定侧边栏和页脚的水平滚动网站。我试图让我的内容达到 100% 的高度以坐在页脚上。尽管我的侧边栏处于 100% 的高度，尽管其中几乎没有任何内容，但我无法让我的内容 div 达到 100% 并坐在页脚上。这是我的 HTML 结构：

    <html class="multiplebgs" xmlns="http://www.w3.org/1999/xhtml">   
    <body>  
     <div class="wrapper">
        <div class="sidebar">
            <div class="hlogo">Lorem Ipsum</div> 
            <div class="navigation demi f11">
                <ul>
                    <li><a href="#content1">ABOUT US</a></li>
                    <li><a href="#content2">WHAT WE DO</a></li>
                    <li><a href="#content3">OUR THEORY</a></li>
                    <li><a href="#content4">PORTFOLIO</a></li>
                    <li><a href="#content5">CLIENTS</a></li>
                    <li><a href="#content6">CONTACT US</a></li>
                </ul>
            </div>
        </div>
<section class="habout step">
        <div class="content" id="content1">

        </div>
</section>
</div>
 <div class="footer fcolor">
</div>
</body>
</html>

还有我的 CSS：

html {
      background: url(../img/bg.png) no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png', sizingMethod='scale')";
        height:100%;
}
body {
    margin:0;
    height: 100%;
    font-family:Verdana,Tahoma,Arial,Sans-Serif;
    color:black;
    font-size:12px;
    width: 12660px;

}
.wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -45px;
}
.content{
    float:left;
    width:1000px;
    margin: 0px;
    height: 100%;
    padding: 0 360px;
}
#content1 { background:url(../img/bgaboutus.png) no-repeat bottom center;}
.sidebar {
    float:left;
    width:350px;
    position: fixed;
    background: url(../img/bg.png) no-repeat fixed;
    -webkit-background-size: cover;
    background-size:cover;
    height: 100%;
    z-index: 1;
}
.step {
    float: left;
    margin: 0px;
    position:relative;
    height: 100%;
    min-width: 1000px;
    padding: 0px;
    overflow:auto;
}
.no-multiplebgs .habout {}
.multiplebgs .habout {background: url(../img/naboutus.png) top right no-repeat fixed;}

即使我应用了 100% 高度的侧边栏类的 CSS，部分和内容 div 也不会拉伸到 100% 高度。

欢迎提出任何建议。谢谢

【问题讨论】：

标签： horizontal-scrolling css

【解决方案1】：

问题出在课堂 .wrap{ height: auto !important;} 中。一旦我删除了高度自动，内容 div 就会扩展到 100% 。

谢谢

【讨论】：