Max-height ignored in Firefox, works in Chrome and Safari

Question

I'm making a slideshow of images with the class "Display". I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:

.Display {

max-width: 80%;
max-height: 80%;

}

It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.

Thanks very much for any help.

Answer 1

You need to set height for container element or to body:

body {
    height:100%;
    min-height:100%;
}