Question

我有一个滚动的div，并且里面有一个div，我想设置100％的高度。但是，它不起作用。这是我的代码：

＆＃13;

.column {
  float: right;
  width: 88%;
  max-height: 430px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 0;
  position: relative;
}
.detailed {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999999;
  background: #fff;
  width: 240px;
  height: auto;
  min-height: 100%;
  max-height: 100%;
  box-shadow: -5px 0px 10px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: -5px 0px 10px 1px rgba(0, 0, 0, 0.1);
  padding-bottom: 100px;
}

＆＃13;

<div class="column">
  <div class="detailed"></div>
</div>

＆＃13;

编辑注意：这只是一个拼写错误。主文档具有正确的拼写和一切。我累了。

Answer 1

请参阅小提琴：https://jsfiddle.net/0q1jy877/

.column {
  float: right;
  width: 88%;
  max-height: 430px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 0;
  border: 1px solid green;
}

.details {
  background: #fff;
  width: 240px;
  height: auto;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-shadow: -5px 0px 10px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: -5px 0px 10px 1px rgba(0,0,0,0.1);
  padding-bottom: 100px;
}

<div class="column">
   <div class="details"></div>
</div>

您的html div与类“column”缺少引号，并且您在css中使用了“.detailed”类，但在html中使用了“.details”类，因此它不匹配。

除此之外，我基本上只是删除了位置＆amp;顶部/左侧/底部/右侧属性，因为它们对于您想要实现的目标不是必需的。

Answer 2

有几种方法可以实现。我个人喜欢使用我在创建响应式iframe时使用的简单方法，无论内容如何，结果都是相同的。

我只需添加一个

padding-bottom: 56.25%

我还添加了一个白色背景，以便您可以看到高度，并记住您将主容器设置为430px。

在此处查看演示：https://jsfiddle.net/norcaljohnny/636m15dj/1/

滚动DIV，我希望它内部的DIV具有100％的高度

2 个答案: