div 忽略高度和溢出属性

我正在尝试用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>

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

我的猜测是你想让div 100% - 80px当前窗口高度。为此，您可以使用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>

您遇到的问题是 html 和正文标签会自动调整为其内容的高度。如果要在内部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>

相关内容

最新更新

热门标签：