use both height and min height, and both in percent

Question

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

Answer 1

Demo

You can set height to auto and min-height to 100%. That is, only if the inner div has static position.

.outer {
    height: auto;
    background:red;
    min-height: 100%;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto; /* or 0 if you want to maintain its position in the upper-left corner */
    padding-top: 30%;
}

Answer 2

If I understand your question correctly, does setting both to position: relative and removing the margin: auto meet your requirement?

body, html {
  height: 100%;
}
.outer {
    background:red;
    min-height: 100%;
    position: relative;
}
.inner {
    position: relative;
    background:blue;
    box-sizing: border-box;  /* required if you're using padding */
    width: 60%;
    padding-top: 30%;
}

http://jsfiddle.net/LmDNx/1/

Answer 3

.outer {
    height: auto;
    min-height: 100%;
}
.inner {
    box-sizing: border-box;
    width: 60%;
    margin: auto; 
    padding-top: 30%;
}

min-height attribute can be used and it accepts value in %

Answer 4

.outer {
    background:red;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}