Question

我一直在尝试将div的内容（图像，搜索栏和三个按钮全部堆叠在一起）以适合具有溢出的css样式的div隐。 div的CSS如下：

.jumbotron {
  overflow: hidden;
  display: block;
  padding: 0;
  margin-bottom: 0;
  background: #000000 url('../landing_background.jpg') no-repeat center center fixed;
  background-size: cover;
  position:relative;
}

可以修复它的一些javascript将是：

    Parallax.prototype.translateBgImage = function() {
        var scrollPos = $(window).scrollTop();
        var pagecoverHeight = this.$element.height();
        if (this.$element.attr('data-pages-bg-image')) {
            var relativePos = this.$element.offset().top - scrollPos;

            // if element is in visible window's frame
            if (relativePos > -pagecoverHeight && relativePos <= $(window).height()) {
                var displacePerc = 100 - ($(window).height() - relativePos) / ($(window).height() + pagecoverHeight) * 100;
                this.$element.css({
                    'background-position': 'center ' + displacePerc + '%'
                });
            }
        }
    }

Answer 1

假设您希望overflow: hidden div按原样包含所有内容，

如果您使用css属性min-height（初始高度为div）并设置height: auto;，则div的大小应根据内容动态更改高度。如果您希望width使用min-width和width: auto;

，则相同

假设您希望overflow: hidden div为固定大小并调整子项的大小以适应，

以下讨论可能对您有所帮助：

Drop down menu cut off by overflow hidden

Make children fit inside parent

将div的内容自动适合隐藏的溢出div

1 个答案: