html - Responsive div layer with fixes height -

how can set div layer have e fixed height in pixels in same time height responsive in smaller resolution ?

let's height of div is:

html

<div id="size"></div> 

css

#size {  height:500px;  } 

if make height 100% resize , responsive. why need have fixed size , responsive in same time, because height using transition element happening div once clicked. find out if there sollution of problem.

here fiddle example: http://jsfiddle.net/vladicorp/frnf5/

right style:

#index_slider {   width:100%;   position: relative;   overflow:hidden;   float: left;    transition:all 1s ease;   height:430px;  } 

have fixed size, , not responsive if 100% height responsive lusing transition effect. problem

you can use height property in combination min-height:

#size {     height:100%;     min-height:500px; } 

this make element stop resizing down when reaches 500px height.

you can use height style in combination max-height style:

#size {     height:500px;     max-height:100%; } 

this make fixed height of 500px, if container resized down less 500 pixels, automatically start resizing it.