If you're looking to achieve a specific layout, consider utilizing absolute
positioning. Here is an example:
Check out this JS Fiddle link
.outer {
height: 200px;
border: 2px solid black;
position: relative;
overflow: hidden;
}
.content {
height: 100%;
overflow: scroll;
}
.fadeout {
width: 100%;
height: 40px;
position: absolute;
display: block;
bottom: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
Keep in mind that adding overflow: scroll
to .content
rather than .outer
prevents the blur from scrolling.
If you opt for fixed
positioning, the blur will stick to the bottom of the user's viewport instead of the element itself.