White space occurred when using overlay css by creating div to highlight element

This is my css which used to highlight content of page.

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

I am using adminlte template and i am adding overlay to certain page then it caused this problem when overlay happened.

//Function to set position

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';
    },

The problem caused by the height of the html, any way to solve the problem? The problem caused by the //bottom div