Is there a way to set min-height based on percent in CSS ?
when I have used both height and min-height, I can't use both in percent I'm looking for a way to control min-height because my content is based on percent and the height of it changed.
I can't set the height to auto, because I need the height to be 100% and min-height is also based on percent.
that is the design of page, It shoud be full screen , until the minimun-height, but in a range of 1400 to 1100 the page is responsive and get smaller by percent, and I wanna keep those ratio, I mean height 100% until the minimun specific height, but becuase my content height changing I want that specific minimun height is also change
<div class="outer">
<div class="inner"></div>
</div>
body, html {
height: 100%;
}
.outer {
height:100%;
background:red;
/* MIN-HEIGHT ???????!!! */
}
.inner {
position: absolute;
background:blue;
box-sizing: border-box;
width: 60%;
margin: auto;
padding-top: 30%;
}
Here is the fiddle of my PROBLEM , http://jsfiddle.net/LmDNx/1/
as you can see I want to set the min hight for the outer div as the size of inner div, but the inner div is based on percent and also height is 100%, what can min-height be ??
UPDATE : you can omit that position absolute