Position element at the bottom of a fixed position div

Question

I'm looking to position a div within a position: fixed div at the bottom of the parent div . The only conditions are that the parent div has to have position: fixed , and the element should become hidden if the page is vertically resizes.

The only solution I have discovered follows this JSFiddle I made: http://jsfiddle.net/WhnFc/

The problem with this solution, however, is that if the page is vertically resized, the div positioned at the bottom will stay at the bottom of the page and not become hidden.

Are there any other solutions or tricks to solve this w/out using JS?

Answer 1

I can't comment but I think the only way to hide the div when you resize it is to use media queries

For example, if the browser window get's smaller then 500px it wouldn't be shown

@media only screen and (min-width: 1px) and (max-width: 500px) {.bottom { display:none; }}