Дети div 100% высота от родителя

Question

У меня есть 2 divs и одна ul с содержимым внутри, высота ul не всегда одинакова, иногда будет иметь 100% или более родителей и других меньше, как я могу сделать, чтобы сделать заполнение дна, когда высота превышает 100%?

HTML:

<div id="parent"> 
    <div id="child"> 
     <ul> 
      <li>Test</li> 
     </ul> 
    </div> 
</div> 

CSS:

#parent { 
    max-height: calc(100% - 50px); 
    background-color: red; 
    margin: 20px 0; 
    border: 1px solid black; 
    overflow: hidden; 
} 
#child { 
    padding-bottom: 10px; 
} 

Вот пример в jsfiddle

Im пытается использовать JScrollPane внутри ул тоже, но

Спасибо!

Answer 1

Попробуйте установить overflow: hidden в body.

body {overflow: hidden} 

Answer 2

Был ли взломанный css, чтобы получить это. Добавлен 10px border-bottom с одним и тем же цветом контейнера и теневой тень для черного пограничного дна.

#parent { 
    max-height: calc(100% - 50px); 
    background-color: red; 
    margin: 20px 0; 
    border: 1px solid black; 
    box-shadow: 0 1px 0 black; 
    border-bottom: 10px solid red; 
    overflow: hidden; 
} 

Вот jsfiddle

Надеется, что это помогает!