ul и li 100% высота нефиксированного родителя

Question

Я ищу самый простой способ получить < ul > и это < li > элементов на 100% высоту родителя < ul >'s. Родитель не исправлен (и я стараюсь избегать этого, поэтому он гибкий на мобильных устройствах). Вот JSFiddle

В принципе, я хочу, чтобы красные ящики были на 100% высотой серого цвета.

Спасибо!

Примечание: Я уже пробовал разные вещи, просто ничего не работало должным образом.

Answer 1

Есть несколько вещей, которые вам нужно сделать.

1. Укажите высоту .site-header, например. 40px
2. Каждый родитель li потребности быть 100% Heigh
3. Сделать заголовок и навигационную контейнер встроенный

Это должно работать

h1 { 
    margin: 0; 
    display: inline; 
} 
.site-header { 
    background: rgba(0,0,0,0.5); 
    width: 100%; 
    height: 40px; 
} 
.row { 
    height: 100%; 
} 
.site-title { 
    display: inline; 
    font-family: 'Roboto Mono'; 
    font-weight: 100; 
} 
h1 { 
    margin: 0; 
    padding: 0; 
    display: inline; 
} 
.site-nav { 
    height: 100%; 
    float: right; 
} 
ul { 
    list-style-type: none; 
    height: 100%; 
    margin: 0; 
} 
li { 
    background: red; 
    float: left; 
    height: 100%; 
    text-align: center; 
    width: 150px; 
}