html - 将正常流中的元素定位在固定元素下方

Question

目前，我有一个位于页面中心的固定元素:

.class {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: white;
}

无论屏幕大小如何，此元素始终在浏览器中显示为死点。但是，有什么方法可以让我的常规内容流始终紧随其后开始？

我考虑过只放置一个简单的间距 div，但由于这个元素居中的位置不同，我不确定最好的方法是什么来预测它始终位于何处。

Answer 1

您可以使用 CSS3 calc() 函数为间隔元素设置 height 属性，以便向下插入内容框:

.spacer {
    height: calc(50% + 150px); /* 50% of screen + 1/2 of the height of the box */
}

HTML:

<div class="class">The fixed box</div>
<div class="spacer"></div>
<div class="content">Content goes here...</div>

WORKING DEMO