使用不同高度的元素跳转内容的解决方案？

Question

这是一个常见问题，我不确定这是一个很好的解决方案吗？也许以某种方式使用javascript？

此处示例：

https://jsfiddle.net/8mf7qy5e/1/

当您点击“更改结果”时按钮我正在测试加载您可能会在加载新数据的应用中看到的新结果。

您会注意到下面的内容（黑匣子）跳跃，因为结果会返回不同长度的数据，即原始结果会有更多结果，因此内容会根据内容的数量而跳跃。

我可以设置一个最小高度，然后我会在结果下面有大量的空白区域，但结果并不多。

这个问题是一个可靠的解决方案吗？

由于

HTML

<div class="container">
    <button id="btn-results">Change results</button>
    <div class="results-content">
        <div class="results-a">
            <div class="grid">
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
            </div>
        </div>
        <div class="results-b">
            <div class="grid">
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
                <div class="grid-item col-3">
                    <h3>Title</h3>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, reprehenderit.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-wrapper">
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
    </div>
</div>

CSS

/* Base */
body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

/* Content */
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    text-align: center;
    background: black;
    color: #fff;
}

.content-wrapper {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

/* Grid */

.grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
}

.grid-item {
    padding-left: 20px;
    margin-bottom: 20px;
}

.col-3 {
    width: 25%;
}

/* Results */
.results-content {
    padding: 50px;
}

.results-b {
    display: none;
}

JQUERY

    $('#btn-results').on('click', function(){
        $('.results-a').toggle();
        $('.results-b').toggle();
    });