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

Question

(请记住我不懂代码)

http://sebcastilho.com/

我希望图像 slider 拉伸(stretch)到浏览器的整个宽度。该网站的主题使用了一些响应式代码，因此无法将 slider 的父 DIV 宽度设置为 100%。

所以解决方案是'position: absolute'让 slider 适应浏览器的 100% 宽度。但是，当我这样做时，浏览器不知道 slider 的内容有多高，因此网站的下一部分最终会向上移动并被 slider 覆盖。

如何让 Royal Slider 的父 DIV 根据 slider 的高度动态改变高度( slider 本身是动态的，取决于它的像素宽度)？

编辑(在 ncardeli 的回答之后) 我得到了这段我发现有效的代码。它获取 slider div(具有 position: absolute 的那个)的高度，并将高度赋予包含的 div。

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

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

Answer 1

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

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

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

然后您应该为每个断点设置一个规则，将 left 设置为一个计算值。计算值是容器宽度减去视口(viewport)宽度和左内边距的值:

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