Question

Explanation:

I have a page with a content div that will change height. When the div is small I’d like a nice gradient fade to the background color. As the div grows in height it should push the gradient further down until it is off the page.

Example Page

This example works properly, however I want to know if I can do this without using position:fixed on the gradient div. The reason that I don’t want to use fixed positioning is because the above example looks strange on the iPad when you go to scroll the page up and down. Everything moves except the gradient so it makes the page look broken.

Is there any way to structure my example without using fixed positioning?

Thanks!

Answer 1

Simply adjust the height of elements and change overflow of body and #content (example):

<div id="content">
    Content here. Use slider to adjust height.<br />
    <div id="slider"></div>
    This div <strong>should</strong> trigger a scrollbar on the window.
</div>
<div id="gradient">Gradient fade to body background. This div <strong>should not</strong> trigger a scrollbar on the window.</div>

html, body {
    height:100%;
}
body {
    padding: 0;
    margin: 0;
    background-color: Green;
    overflow:hidden;
}
div {
    color: #fff;
    text-align: center;
    font-size: 16pt;
}
#slider {
    width: 300px;
    margin: 0 auto;
}
#content {
    line-height: 100px;
    background-color: Red;
    overflow:auto;
    max-height:100%;
}
#gradient {
    height: 200px;
    line-height: 200px;
    background: Orange;
    width: 100%;
}