Why won't my page expand to the increasing size of an absolutely positioned div? <p>I have a form fixed to the bottom of the page, and an absolutely positioned div above it. Output from the form correctly displays just above the form itself, but when the output fills the page, I cannot scroll up and view it. It seems that the output overflows the <code>body</code> element, and is ignored. </p> <p>I've tried making the output div, called <code>main</code>, positioned relative, but the content does not appear where I want it. </p> <p>My markup in Haml: </p> <pre><code>%body .title-wrapper %h1 .main .form-wrapper %form{:action =&gt; "/", :method =&gt; "post", :id =&gt; 'target'} %input{:type =&gt; "text", :name =&gt; "code", :class =&gt; "input"} </code></pre> <p>my CSS: </p> <pre><code>* { 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; } </code></pre> <p>Image: </p> <p><img src="https://i.stack.imgur.com/khuK6.png" alt="my page"></p>