Question

我有一个“关闭”链接和一个内容框，文本位于绝对定位的包装内，其宽度和高度都固定为overflow: hidden。如果文本长度超过包装器的高度，则应将滚动条应用于内容框。

我尝试overflow: auto甚至overflow: scroll，但它不起作用。

参见jsfiddle：http://jsfiddle.net/henrik23/mwqq8rzd/29/

我可以给包装器overflow: auto，但这不是我想要的。只有文本应该是可滚动的，“关闭”链接应保持不变。

谢谢！

Answer 1

你应该添加身高：

.content {
    overflow: auto;
    height: 100%;
}

demo

Answer 2

要让.content滚动，您可以使用overflow:auto或overflow:scroll。但我建议给它一些高度，例如其父母height:100%。否则，.content的高度将展开以适合其内容（而不是滚动），而.wrapper会因其overflow:hidden而切断底部。

.content {
    overflow: auto;
    height:100%;
}

以下测试：

＆＃13;

.wrapper {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background: #eee;
  padding: 0.5em 1em;
  overflow: hidden;
}
.close {
  text-align: right;
}
.content {
  overflow: auto;
  height: 100%;
}

＆＃13;

<div class="wrapper">
  <div class="close">
    <a href="#">close</a>
  </div>
  <div class="content">
    <p>This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some
      content ... This is content ... some content ... This is content ... some content ...</p>
  </div>
</div>

＆＃13;

修改

实际上，height:100%并不起作用。由于.close元素占用了一定的高度，height:100%会将.content的底部推到.wrapper的底部。一种解决方案是为.close和.content设置一个高度，使它们加起来达到100％。

.close {
  text-align: right;
  height:15%;
}
.content {
  overflow: auto;
  height: 85%;
}

以下测试：

＆＃13;

.wrapper {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background: #eee;
  padding: 0.5em 1em;
  overflow: hidden;
}
.close {
  text-align: right;
  height: 15%;
}
.content {
  overflow: auto;
  height: 85%;
}

＆＃13;

<div class="wrapper">
  <div class="close">
    <a href="#">close</a>
  </div>
  <div class="content">
    <p>This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some content ... This is content ... some
      content ... This is content ... some content ... This is content ... some content ... END</p>
  </div>
</div>

＆＃13;

Answer 3

我们走了。 css属性overflow: auto适用于已定义的height。请参阅fiddle

当它的包装有“溢出：隐藏”时，是否可以给一个“溢出：自动”框？

3 个答案:

修改