Altezza CSS3: il 75% non vuole lavorare: html, css, css3, twitter-bootstrap, altezza

Qui "s quello che ho" m cercando di fare http://www.zabkaspace.me/will/

Come puoi vedere, c'è un div, con le anteprime attivateed è scorrevole. Ma il problema è che questo div ha una dimensione fissata con una dimensione specifica (380px). Ho provato molte impostazioni diverse e non posso usare una dimensione usando% e non px ... I don "t capire perché ^^

Ecco il mio codice:

Parte 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>

Parte CSS:

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

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

La classe del contenitore proviene da Bootstrap 3.

Il problema è che quando lo sostituisco

height: 380px;

da (in .hidden-barra di scorrimento)

height: 75%;

Si rovina tutto! Qualcuno ha avuto un'idea del perché l'impostazione della dimensione in% non funziona? :)

Grazie :)

risposte:

1 per risposta № 1

Il browser non sa quale sia il 75% dell'altezza senza che i genitori abbiano la loro altezza definita, in questo caso, devi dare un'altezza ai loro genitori.

Quindi il tuo CSS, deve avere quanto segue:

html {
height:100%;
}

body {
height:100%;
}

.container {
height:100%;
}

.hidden-scrollbar {
height:75%;
}

Il che mi dà quanto segue:

---