css - 如何使用 CSS 将 block 放置在 "second"屏幕的顶部？

Question

问题:我有这样一个页面，其中第一个屏幕(无论屏幕分辨率如何)完全被具有漂亮背景的 block 和该 block 最底部的“注册”按钮占据 JSFiddle(它仅适用于网站的移动版本，但在这种情况下无关紧要)

<div class="first-screen"> 
    <div class="about">
        <h1>Motto</h1>
        <a href="#" class="btn btn-primary btn-block">Click here</a>
    </div>
</div>

.first-screen {
    position: absolute;
    top: 55px;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('http://placehold.it/1000x1000&text=first screen') transparent no-repeat;
    background-size: 100% 100%;
    padding: 0;
    margin: 0;      
}

任务:我需要在第一个屏幕之后立即显示页面上的其他内容(现在它在 .first-screen 下，因为 position:absolute;);

挑战:我需要不用任何JS来解决这个任务(我可以用js解决，但我不想)。

任何可行的解决方案(使用 display: table, table-row, table-cell;, flexboxes etc.)或任何建议都将不胜感激。

注意:可以通过为 .second-screen 设置 margin-top 来破解它，但它不是防弹的全部。

提前致谢!

Answer 1

所以做了一点研究得出了这个:

https://stackoverflow.com/a/16837667/1192506

这让我使用了 vh 高度百分比。

示例:http://jsfiddle.net/tXpj7/3/

编辑

使用 100% 高度 html、正文从该答案中获取接受的示例，然后操纵导航栏和第一个屏幕的高度。你会得到同样的结果。

http://jsfiddle.net/tXpj7/6/