Div 忽略高度和溢出属性

Question

我正在尝试用 height: calc(100% - 80px) 和 overflow: scroll 制作 div。 div 完全忽略了这两条规则。这是我尝试过的：

.tab-content {
    clear: both;
    height: calc(100% - 80px);
    overflow: auto;
}

#tutorial {
    padding: 5%;
}

Tutorial

<div id="tutorial" class="tab-content">
    Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
</div>

请提醒我哪里出错了以及如何解决问题。

Answer 1

您运行遇到的问题是 html 和 body 标签的大小会自动调整为其内容的高度。如果要在内部实现滚动条div，就得建立溢出，否则就没有溢出。

html, body {
  height: 100%;
}
.tab-content {
  background-color: rgba(0,0,0,0.15);
  clear: both;
  height: 100px;
  height: -webkit-calc(100% - 80px);
  height: -moz-calc(100% - 80px);
  height: calc(100% - 80px);
  overflow: scroll;
}

#tutorial {
  padding: 5%;
}

Tutorial

<div id="tutorial" class="tab-content">
  Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
  <br> Tutorial content
</div>

Answer 2

我猜你想让 div 100% - 80px 成为当前的 window 高度。为此，您可以使用 100vh

.tab-content {
    clear: both;
    height: calc(100vh - 80px);
    overflow: auto;
    background: aqua;
}

#tutorial {
    padding: 5%;
}

Tutorial

<div id="tutorial" class="tab-content">
    Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
    <br> Tutorial content
</div>

Div 忽略高度和溢出属性

Div ignoring height and overflow properties

css

scroll

overflow

css-calc