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

Child DIV with dynamic height and absolute position - Give height to parent DIV

本文关键字：高度 DIV- DIV 位置 动态      更新时间：2023-09-26

（请记住，我不懂代码）

http://sebcastilho.com/

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

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

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

编辑（在ncardeli的回答之后）我得到了我发现有效的这段代码。它获取滑块div的高度（具有位置：absolute的滑块），并将高度提供给包含的div

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

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

使用vw单位和计算，使用纯CSS的解决方案可能是可行的

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

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

然后，您应该为每个断点设置一个规则，向左设置一个计算值。计算的值是将容器宽度减去视口宽度和左填充的值得出的：

@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

  • vw单元：http://caniuse.com/#feat=viewport-单位

如果你喜欢Javascript解决方案，这个脚本可以：

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