将 div 的内容自动调整到隐藏的溢出 div

【问题标题】：Auto-fit contents of a div to a hidden overflow div将 div 的内容自动调整到隐藏的溢出 div
【发布时间】：2017-08-09 03:21:15
【问题描述】：

我一直在尝试获取一个 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 + '%'
                });
            }
        }
    }

【问题讨论】：

标签： jquery html css bootstrap-4

【解决方案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

【讨论】：