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

Question

（请记住，我不精通代码）

http://sebcastilho.com/

我希望图像滑块拉伸到浏览器的整个宽度。该网站的主题使用了一些响应式代码，因此滑块的父DIV的宽度不能设置为100%。

所以解决方案是“位置：绝对”以使滑块适合浏览器的 100% 宽度。但是，当我这样做时，浏览器不知道滑块的内容有多高，因此网站的下一部分最终会向上移动并被滑块覆盖。

如何让 Royal Slider 的父 DIV 根据滑块的高度动态更改高度（滑块本身是动态的，基于它的像素宽度）？

EDIT（在 ncardeli 的回答之后） 我得到了我发现工作的这段代码。它获取滑块 div 的高度（具有 position: absolute 的高度）并将高度赋予包含的 div。

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

我的问题是，如果浏览器改变大小，它不会刷新。我怎样才能做到这一点？

Answer 1

使用 vw unit 和 calc 的纯 CSS 解决方案可能是可行的。

您应该将滑块的宽度设置为 100vw，并将其相对定位。

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

然后你应该为每个断点设置一个规则，设置 left 为一个计算值。计算出的值是容器宽度减去视口宽度和左内边距的值：

@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);
    }
}

在此处查看浏览器支持：

• 计算：http://caniuse.com/#feat=calc

• 大众单位：http://caniuse.com/#feat=viewport-units

如果您更喜欢 Javascript 解决方案，此脚本可以：

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