ul li bild zu füllen die div

Question

Ich habe eine Seite mit 2 Spalten. Die erste Spalte ist 30% der Breite und die zweite Spalte 70% mit den Vorschaubildern für eine Diashow. Hier ist die zweite Säule:

möchte ich die Thumbnails um den Bildschirm zu füllen, wie Sie können auf der Unterseite der Teil ausgelassen wird. Diese

ist, was ich habe

<div class="wrapper"> 
<ul class="rig"> 
    <li>Image 1</li> 
    <li>Image 2</li> 
    <li>Image 3</li> 
    <li>Image 4</li> 
    <li>Image 5</li> 
    <li>Image 6</li> 
    <li>Image 7</li> 
    <li>Image 8</li> 
    <li>Image 9</li> 
</ul> 
</div> 

.wrapper { 
    max-height: inherit; 
    max-width: inherit; 
} 

.rig { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0; 
    font-size: 0; 
    list-style: none; 
    max-height: 100%; 
    } 

.rig li { 
    display: inline-block; 
    width:33.33%; 
    vertical-align:middle; 
    box-sizing:border-box; 
    margin:0; 
    padding:0; 
} 

Was ich will, ist für die Miniaturansicht den Bildschirm, ohne den roten Teil zu füllen. Gibt es eine Möglichkeit, die Höhe der li Elemente anzugeben? Grundsätzlich möchte ich die Breiten 33.33% und die Höhe 33.33% des übergeordneten Containers sein. Ich möchte es nicht in Pixeln angeben ...

Answer 1

Das Problem wurde behoben. Danke für die Hilfe . gelöst mit height: calc(100vh/3);