绝对位置会在页面末尾产生额外的空白区域

Question

这是我用来突出页面内容的css。

overlay {
        position: absolute;
        opacity: .3;
        background: rgba(0,0,0,.8);
}

我正在使用adminlte模板，我正在向某个页面添加叠加层，然后在叠加发生时导致此问题。

固定位置不会导致任何问题，但是当可滚动内容时，该框不会保留在下拉列表中，它也会滚动。

那么，我该如何解决这个问题呢？我试图添加溢出：隐藏到叠加但不起作用。有人可以帮忙吗？感谢。

设置位置的功能

setPosition: function(step, targetBounds){
        // check if step has disabled the highlight:
        if (!this.stepOpts.highlight){
            return;
        }

        var margin = this.stepOpts.highlightMargin;

        var body = document.body,
            html = document.documentElement;

        var documentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );

        // top div:
        el = this.element.top;
        el.style.top = '0px';
        el.style.left = '0px';
        el.style.width = window.screen.width + 'px';
        el.style.height = targetBounds.top + utils.getScrollTop() - margin + 'px';

        // right div:
        el = this.element.right;
        el.style.top = targetBounds.top + utils.getScrollTop() - margin + 'px';
        el.style.left = targetBounds.left + targetBounds.width + utils.getScrollLeft() + margin + 'px';
        el.style.width = window.screen.width  - (targetBounds.left + targetBounds.width + utils.getScrollLeft() + margin) +  'px';
        el.style.height = targetBounds.height + margin * 2 + 'px';

        // bottom div:
        el = this.element.bottom;
        el.style.top = targetBounds.top + utils.getScrollTop() + targetBounds.height + margin + 'px';
        el.style.left = '0px';
        el.style.width = window.screen.width + 'px';
        el.style.height = documentHeight - (targetBounds.top + utils.getScrollTop() + targetBounds.height + margin) + 'px';

        // left div:
        el = this.element.left;
        el.style.top = targetBounds.top + utils.getScrollTop() + - margin + 'px';
        el.style.left = '0px';
        el.style.width = targetBounds.left + utils.getScrollLeft() - margin + 'px';
        el.style.height = targetBounds.height + margin * 2 + 'px';
    },

解决方法是删除html.clientHeight并使用min（）

var documentHeight = Math.min( body.scrollHeight, body.offsetHeight, html.scrollHeight, html.offsetHeight );