Twitter bootstrap carousel works well with Chrome but doesn't on Firefox,Opera, and IE

Question

I am having a huge issue with twitter bootstrap carousel for other browsers other than Chrome. I have looked all over the place for an answer and tried all the codes but nothing seems to help and I hope someone can help me out here with it.

In Chrome, the carousel takes up the whole page when it loads and you do not need to scroll down to see the picture because the whole picture lands perfectly at the size of your browser, it also perfectly resizes when you make the browser smaller so you can check it out on tablets and mobile. This is the main issue, this does not happen on Firefox, IE, Safari and the like at all because it does not make the image perfectly load on the webpage and has it scroll up and down for the whole picture unlike Chrome, it seems that the CSS or jQuery doesnt function on those pages for some reason and works fine on Chrome.

Please check my code and help me out here I have been at this for two weeks trying to find different solutions to this problem.

    <div class="container contentHeight">



    <div id="myCarousel" class="carousel slide tab-content">

        <ol class="carousel-indicators">

            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>

        </ol>

        <div class="carousel-inner">
            <div class="active item">
                <img src="img1.jpg" alt="Slide1" />

            </div>
            <div class="item">
                <img src="img2.jpg" alt="Slide2" />
            </div>
            <div class="item">
                <img src="img3.jpg" alt="Slide3" />
            </div>

        </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

    </div>

</div>

For my jQuery that I use for the Chrome to take in max height of the page it is as follows:

$(".contentHeight").css("min-height",$(window).height());

Also, thanks to people here I have also managed to make the CSS which works fine on Chrome but fails in other browsers:

.carousel .item {
    width: 100%; 
}
.carousel .item img {
    width: 100%;
    height:100%;    
}
html,body{
    height:100%;
}
.carousel,.item,.active{
    height:100%;
}
.carousel-inner{
    height:100%;
    width: 100%;
}

I really dont know what the problem is, i am guessing it is the CSS or the jQuery but I tried changing those with no luck at all. Any help is much appreciated!

 $(".contentHeight").css("min-height",$(window).height()); 

 .carousel .item { width: 100%; } .carousel .item img { width: 100%; height:100%; } html,body{ height:100%; } .carousel,.item,.active{ height:100%; } .carousel-inner{ height:100%; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="container contentHeight"> <div id="myCarousel" class="carousel slide tab-content"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="active item"> <img src="http://placehold.it/550x550" alt="Slide1" /> </div> <div class="item"> <img src="http://placehold.it/551x551" alt="Slide2" /> </div> <div class="item"> <img src="http://placehold.it/552x552" alt="Slide3" /> </div> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </div> 

Answer 1

If you want height and width to really be the percentage of the page use viewport units. They certainly saved me a lot of frustration with styling.

Newer browsers support viewport units. caniuse.com/#feat=viewport-units min-height: 100vh

Think of viewport units like a percentage of your viewable window (browser window). So, 100vh (vh = viewport height) is 100% of 1080px and 100vw is 100% of 1920px (vw = viewport width) on a 1080p display. This would work similar to normal percentages, however, this is just a more direct way by bypassing content size, parent/child elements, n such. Do double check that site to make sure your user-base is using compatible browsers.

http://caniuse.com/#feat=viewport-units