Висота CSS3: 75% не хоче працювати - html, css, css3, twitter-bootstrap, height

Ось те, що я намагаюся зробити http://www.zabkaspace.me/will/

Як бачите, є div, із мініатюрамице, і він прокручується. Але проблема полягає в тому, що цей дів отримав розмір, зафіксований певним розміром (380 пікселів). Я намагаюсь багато різних налаштувань, і я не можу використовувати розмір, використовуючи%, а не px ... я не розумію, чому ^^

Ось мій код:

Частина HTML:

<div class="container">
<div class="hidden-scrollbar">
<div class="inner">

<div class="row">
<div class="col-sm-6"> <img src="/images/img/tt.jpg" width="100%">   </div>
<div class="col-sm-6">  <img src="/images/img/tt.jpg" width="100%"> </div>
</div>

<!-- More content -->

</div>
</div>
</div>

Частина CSS:

.hidden-scrollbar {
height: 380px;
overflow:hidden;
}

.hidden-scrollbar .inner {
height:100%;
overflow:auto;
margin:0px -300px 15px 0px;
padding-right:300px;
}

Клас контейнерів - з Bootstrap 3.

Проблема полягає в тому, що коли я замінюю

height: 380px;

від (на .hidden-прокрутка)

height: 75%;

Це закручує криву! Хтось мав уявлення, чому встановлення розміру у% не працює? :)

Дякую :)

Відповіді:

1 для відповіді № 1

Веб-переглядач не знає, що 75% зросту, без того, щоб батьки визначили свій зріст, у цьому випадку потрібно надати зріст батькам.

Отже, ваш CSS повинен мати наступне:

html {
height:100%;
}

body {
height:100%;
}

.container {
height:100%;
}

.hidden-scrollbar {
height:75%;
}

Що дає мені таке:

---