Responsive Div height

by Swapnil Dubey

HTML

<div class="page">
    
    <div class="fluid-element-wrapper">
        <div class="fluid-element">
            content
        </div>
    </div>
</div>

CSS

.fluid-element-wrapper {
    width:30%;
    height:auto;
    padding-bottom:0;
    background:green;
}

@media ( max-width:799px ) {
.fluid-element-wrapper {
    position:relative;
    overflow:hidden;
    padding-bottom:30%; /* or whatever the fluid height you'd want it to be */
}

.fluid-element {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
}