HTML/CSS : Inner, 当屏幕高度变小时底部边界 div 越过顶部

Question

目标: 我正在尝试制作一个全屏 div，它将动态调整自身以适应所有屏幕高度(例如:http://full-vert.webflow.com/)。

问题: 当它绑定(bind)到底部并且正在调整屏幕高度时，我正在与子 div 越过它的父 div 的顶部进行斗争。有没有办法让这个子 div 停止随页面高度缩放？

HTML

<div class="container">

    <div class="bottom">

        <h1>Hi!</h1>
        <p>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.</p>

    </div>

</div>

CSS

.container {
    background-color: #f9f9f9;
    width: 100%;
    height:150px;
    position: relative;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

这是一个 jsfiddle:http://jsfiddle.net/Lboyrqnc/
在 .container { height: 200px;} 上尝试不同的值。例如。 50px 到 150px，你会明白我的意思。
附言。我正在使用 height: 100vh 。

编辑: 要真正展示我的意思，试试这个:将 .container 高度设置为 100vh(这是当前浏览器窗口高度的 100%)然后使浏览器窗口模式并上下拖动窗口底部，您将看到 h1 将如何越过(在这种情况下)它是父 div。

Answer 1

如果添加会怎么样

top: 0;

到 .bottom 类？