CSS3身高：75％不想工作

Question

这就是我要做的事情http://www.zabkaspace.me/will/

正如你所看到的，有一个div，上面有缩略图，它可以滚动。但问题是这个div的大小是固定的，具有特定的大小（380px）。我尝试了很多不同的设置，我不能使用％而不是px ...我不明白为什么^^

这是我的代码：

HTML部分：

<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部分：

.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;

by（in .hidden-scrollbar）

height: 75%;

它拧紧了！任何人都知道为什么设置％的大小不起作用？ ：）

谢谢:)

Answer 1

如果父母没有定义身高，浏览器不会知道75％的身高，在这种情况下，你需要给父母一个高度。

所以你的CSS需要有以下内容：

html {
    height:100%;
}

body {
    height:100%;
}

.container {
    height:100%;
}

.hidden-scrollbar {
    height:75%;
}

这给了我以下内容：