Verwenden Sie sowohl die Höhe als auch die Mindesthöhe, und beide in Prozent

Question

Gibt es eine Möglichkeit, Min-Höhe basierend auf Prozent in CSS festzulegen?

, wenn ich die Höhe und die min-height verwendet habe, kann ich nicht beide in Prozent verwende ich für eine Art und Weise bin auf der Suche min-height zu kontrollieren, weil mein Gehalt auf Prozent und die Höhe der Stadt verändert basiert.

Ich kann die Höhe nicht auf auto einstellen, da ich die Höhe 100% und die Mindesthöhe auch Prozent haben muss.

das ist das Design der Seite, Es sollte Vollbild sein, bis die minimale Höhe, aber in einem Bereich von 1400 bis 1100 die Seite reagiert und wird um Prozent kleiner, und ich will dieses Verhältnis halten, meine ich Höhe 100% bis die minimun bestimmte Höhe, aber becuase mein Inhalt Höhe auch ist, ich will, dass bestimmte minimun Höhe verändert sich ändern

<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%; 
} 

hier die Geige meines Problems, http://jsfiddle.net/LmDNx/1/

wie man sehen kann ich will die Min-Höhe für das äußere div als die Größe des inneren div festlegen, aber das innere div basiert auf Prozent und auch Höhe ist 100%, was kann min-height sein ??

UPDATE: Sie diese Position absolut weglassen

Answer 1

Demo

Sie height zu auto und min-height zu 100% einstellen. Das heißt, nur wenn das inner div statische Position hat.

.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

Wenn ich Ihre Frage richtig verstanden habe, ist sowohl position: relative Einstellung und Entfernen der margin: auto Ihre Anforderung erfüllen?

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-Höhenattribut verwendet und akzeptiert Wert in% werden können

Answer 4

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