1

我已经在这里搜索了相关问题，看来我的情况有点独特。

我有一个 jQuery 幻灯片，我想100%用纯 CSS 制作浏览器的宽度和高度。

我可以100%通过我的流畅布局获得宽度并使其与页面一起拉伸，但是当我尝试将其设置为高度100%时，图像会完全消失。

它迫使我用像素定义高度。

我将有一个页脚和页眉，它们100%在图像/背景上拉伸宽度，每个里面都有一个960px宽的包装器。

这是HTML结构：

<div class="page-section header clear">

        <div class="wrapper clear">
            <div class="logo clear">

            </div>
        </div>

    </div>

<div class="page-section clear">
<!-- 100% width -->

        <div id="revolver">
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
            <div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>

        </div>


</div>
    <div class="footer page-section clear">


                    <div class="wrapper">
                        <div class="footer_nav clear">
                            <div class="footer_nav_text">
                                SERIES
                            </div>
                        </div>
                    </div>
        </div>

这是CSS：

body {
 min-height:100%;
}
img. {
 max-width:100%;
}
.page-section {
 width:100%;
 height:100%;
 margin:0px auto 0px auto;
}
.wrapper {
 width:960px;
 margin:0px auto 0px auto;
 padding:0px 20px 0px 20px; 
}
/* header */
.header {
 height:27px;
 background-color:#fff;
 position:absolute; top:20px; 
 z-index:100001;
}
#revolver {
 background-color:#ccc;
 max-width:100%;
 max-height:100%;
 z-index:10001;
}

.revolver-slide {
 background-color:#fff;
 max-width:100%;
 max-height:100%;
 background-position:center center;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
}
.footer {
     height:25px;
     background-color:#fff;
     z-index:1000001;
     position:relative;
     margin-bottom:15px;
     border:1px #000 solid;
}
4

1 回答 1

1

是这样的吗？我放了

    html,body
    {height:100%;
    }

http://jsfiddle.net/p4z8q/14/

于 2013-08-29T04:31:55.233 回答