CSS3 height: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; 
}

容器 class 来自 Bootstrap 3.

问题是当我替换

height: 380px;

通过（在 .hidden-scrollbar 中）

height: 75%;

它把一切都搞砸了！任何人都知道为什么以 % 为单位设置大小不起作用？ :)

谢谢 :)

Answer 1

如果 parents 没有定义高度，浏览器不知道 75% 的高度是多少，在这种情况下，您需要为它们的 parents.[=12 指定一个高度=]

因此您的 CSS 需要具备以下条件：

html {
    height:100%;
}

body {
    height:100%;
}

.container {
    height:100%;
}

.hidden-scrollbar {
    height:75%;
}

这给了我以下信息：

CSS3 height:75% 不想工作

CSS3 height:75% doesn't want to work

html

css

twitter-bootstrap

height