Question

我希望我的（滑动）滑块的高度为屏幕总高度的65％。但是当我添加它时，它不起作用。我的滑块div位于另一个div中，我试图给外部div一个100％的高度，但这也不起作用。

有人可以帮助我吗？

当前的HTML：

    <div class="page-wrap">
<div class="container-fluid">
        <!-- Slider main container -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- Slide -->
                <div class="swiper-slide" style="background-image:url('http://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide_1.jpg')">
                    <div><h1>test</h1></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-white"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
        </div>

<div class="col-md-12 content">
    <p>hello world!</p>
</div>

</div>
<!-- end container -->

</div>
<!-- end wrapper -->

<div class="parallax">
    <section class="footersection">

    <div class="container footer verticalcenter" >
        <div class="inner-footer ">

            <div class="col-md-12">
                <h2>Footer</h2>
            </div>
         </div>
    </div>
    </section>
</div>

Live xample在这里： http://jsfiddle.net/dreejt/gtm29r9k/

Answer 1

我自己仍然是新手，但我认为这可能是position: relative; .page-wrap

引起的

我在你的CSS中试过这个，它似乎有效。

.container-fluid {
    position: absolute;
    width: 100%;
    height: 100%; }

div高度（百分比）不适用于doctype

1 个答案: