CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Addzy
Addzy

Reputation: 674

How to set height of a container to viewport height minus a 300px in height slider?

Excuse the newbie kind of question, I'm sure what I want to do is easy however I must be wording it right when looking for solutions.

Basically I want to set a section in html to the height of the viewport minus the height of the navigation bar and a small slider at the bottom.

I understand that this is something I need Javascript for? If anyone could help that would be great.

I know I could 

    .container {
        height: 100%;
        margin-top: -300px;
        min-width: 100%;
    }

    .slider-wrapper {
        height: 300px;
        min-width: 100%;
    }

But it really doesn't give the desired effect as it would cut off the top of the container. Is there some sort of Jquery maths we can do to subtract the height of .slider from the height of .container?

Sorry, as asked for in comments, heres some more markup, i've only included the container sections as they're the only ones that at the moment I need to interact with. Here's the html

    <section class="top-bar">
    </section>

    <section id="container">
    </section>

    <section class="slider-wrapper">
    </section>

So those are the three containers that make up the actual layout of the screen at the moment. so here's the css I have for the .container as it stands:

    #container {
        background: url(../img/cafe-background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: relative;

}

so I just need to minus the height of the .slider-wrapperunderneath from this container.

Upvotes: 1

Views: 2542

Answers (4)

user2628521
user2628521

Reputation:

jQuery:

Here a live demo: http://jsfiddle.net/zyrc0tbb/

<head>
 <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
 <script>
     $(document).ready(function () {
        var indexd = parseInt($(document).height()) - parseInt($('.slider-wrapper').css('height')) + 'px';
        $('#container').css('height', indexd);
     });
 </script>
</head>

Upvotes: 0

Rob Monhemius
Rob Monhemius

Reputation: 5144

I assume you want something like this. The #top-bar and #slide-wrapper have a preset height and have position: fixed. #container will fit in between those, because of the top and bottom values. #container also has position: fixed.

This solution will create a weird scrollbar if your content in #container is higher than #container div.

A simple fix for this is to use position: relative for the #container and add margins to the top and bottom.

Anyway you definately do not need css3 or javascript to do what you want. You will just need to read up on the position property. I m sure there is enough information about it on the internet to figure out how it works.

Example:

http://jsfiddle.net/e0tpnojf/

HTML

<section id="top-bar">
</section>

<section id="container">
</section>

<section id="slider-wrapper">
</section>

CSS

#top-bar{
    width: 100%;
    background: blue;
    height: 100px;
    position: fixed;
    top: 0px;
}
#container{
    width: 100%;
    background: yellow;
    top: 105px;
    bottom: 105px;
    position: fixed;
}
#slider-wrapper{
    width: 100%;
    background: red;
    height: 100px;
    position: fixed;
    bottom: 0px;
}

Upvotes: 0

Nishanth Matha
Nishanth Matha

Reputation: 6081

You can use css3 calc function no need of javascript:

.container {
    height: calc(100% - 300px)
    min-width: 100%;
}

.slider-wrapper {
    height: 300px;
    min-width: 100%;
};

If you want the make .slider-wrapper auto use nested section in your mark-up something like this:

<section id="container">
   <section class="slider-wrapper">
   </section>
</section>

Upvotes: 0

jakub_jo
jakub_jo

Reputation: 1634

If I understand your question correctly, just use calc() with viewport height units:

.container {
        height: calc(100vh - 300px);
}

Upvotes: 2

Related Questions