Question

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

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

我能够获得宽度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;
}

Answer 1

是这样的吗？我已经把

了

    html,body
    {height:100%;
    }

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

如何使幻灯片图像100％的浏览器宽度和高度

1 个答案: