具有动态高度和绝对位置的子DIV-给父DIV赋予高度

Question

(Please keep in mind I am not code savvy)

http://sebcastilho.com/

I want the image slider to stretch to the full width of the browser. The website's theme uses some responsive code and so the width of parent DIV of the slider can't be set to 100%.

So the solution is to 'position: absolute' to get the slider to fit 100% width of the browser. However, when I do this, the browser doesn't know how high the content of the slider is and so the next sections of the website end up moving up and being covered by the slider.

How can I get the parent DIV of Royal Slider to change height dynamically based on the height of the slider (which itself is dynamic based on how many pixels wide it is)?

EDIT (After ncardeli's answer) I got this piece of code I found working. It gets the height of the slider div (the one that has the position: absolute) and gives the height to the containing div.

$(document).ready(function(){
    var x = $('#new-royalslider-1').height();
    $('.photographySlider').css('height', x);
})

My problem is that it doesn't refresh if the browser changes size. How can I achieve this?

Answer 1

A solution with pure CSS might be feasible, using vw unit and calc .

You should set the width of the slider to 100vw, and position it relative.

#new-royalslider-1 {
    background-color: black;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100vw !important;
}

Then you should set a rule for each breakpoint, setting left to a calculated value. The calculated value results from substracting the container width to the viewport width and the value of the left padding:

@media (min-width: 768px) {
    #new-royalslider-1 {
        left: calc((750px - 100vw) / 2 - 15px);
    }
}

@media (min-width: 992px) {
    #new-royalslider-1 {
        left: calc((970px - 100vw) / 2 - 15px);
    }
}

@media (min-width: 1200px) {
    #new-royalslider-1 {
        left: calc((1170px - 100vw) / 2 - 15px);
    }
}

Check here for browser support:

• Calc : http://caniuse.com/#feat=calc

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

If you prefer a Javascript solution, this script will do:

$(window).on('resize', function (){
    $('.photographySlider').height($('#new-royalslider-1').height());
})