JS小提琴:让div占据100%的高度

时间:2015-06-14 19:37:57

标签: jquery html css jsfiddle

我正在准备一个小提琴来提出另一个问题,但在制作小提琴时偶然发现了另一个问题。

以下是fiddle的链接。

HTML代码:

<div class="outer-container">
            <div class="inner-container">
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/homeslide1a.png'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">

                        <div class="clearfix"></div>
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-membership.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/02/2-Home-special-events.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->
                <div class="slider-one slide" style="background-image:url('http://208.131.135.54/~imacre17/wp-content/uploads/2015/03/CORKHome-_position4.jpg'); height: 100%; background-size: cover;" class="slider-background-image' ">
                    <div class="slide-inner-container">
                        <!-- More content here soon -->
                    </div><!-- /.slide-inner-container -->
                </div><!-- /.slide -->


            </div><!-- /.inner-container -->
        </div><!-- /.outer-container -->

有四个带有.slide类的div,每个div都有一个背景图像作为内联样式添加到它。每个div也有100%的高度适用于它。

如果我在HTML页面中应用相同的样式一切都很好,这里是link。如何让div占据100%的高度。

2 个答案:

答案 0 :(得分:1)

您可以将position:fixed; height:100%;添加到幻灯片类

答案 1 :(得分:1)

我的jquery代码错了:

此代码:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

$("*").css({"width": viewportWidth, "height": viewportHeight});

解决了这个问题。