为什么我的页面扩展到绝对定位的div的增加大小？

Question

我有一个固定在页面底部的表单，以及一个绝对定位的div。 表单输出正确显示在表单本身上方，但当输出填充页面时，我无法向上滚动并查看它。似乎输出溢出body元素，并被忽略。

我尝试将名为main的输出div设置为相对位置，但内容不会出现在我想要的位置。

我在Haml的标记：

%body
.title-wrapper
  %h1
.main
.form-wrapper
  %form{:action => "/", :method => "post", :id => 'target'}
    %input{:type => "text", :name => "code", :class => "input"}

我的CSS：

* {
  font-family: Menlo, sans-serif;
}

.main {
  font-size: 14pt;
  position: absolute;
  bottom: 3em;
  width: 70%;
}

.title-wrapper {
  float: right;
  display: inline-block;
  height: 100%;
  width: 20%;
}

h1 {
  display: inherit;
  float: right;
  position: fixed;
}

.form-wrapper {
  width: 97%;
  position: absolute;
  bottom: 1em;
}

.input {
  width: 100%;
  height: 2em;
  font-size: 14pt;
}

图片：