CODEWITHSUNDEEP
htmlcsstwitter-bootstrapheight
Zabka
Zabka

Reputation: 94

CSS3 height:75% doesn't want to work

Here's what I'm trying to do http://www.zabkaspace.me/will/

As you can see, there's a div, with thumbnails on it, and it's scrollable. But the problem is that this div got a size fixed with a specific size (380px). I've try a lot of different settings, and I can't use a size using % and not px ... I don't understand why ^^

Here's my code :

HTML part :

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

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

        <!-- More content -->

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

CSS part :

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

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

The container class is from Bootstrap 3.

The problem is that when I replace

height: 380px;

by (in .hidden-scrollbar)

height: 75%;

It screws evrything up ! Anyone got an idea of why setting the size in % doesn't work ? :)

Thanks :)

Upvotes: 0

Views: 196

Answers (1)

Tio
Tio

Reputation: 587

The browser doesn't know what 75% of height is without the parents having their height defined, in this case, you need to give an height to their parents.

So your CSS, needs to have the following:

html {
    height:100%;
}

body {
    height:100%;
}

.container {
    height:100%;
}

.hidden-scrollbar {
    height:75%;
}

Which gives me the following: enter image description here

Upvotes: 1

Related Questions