Div 忽略高度和溢出属性答案

【问题标题】：Div ignoring height and overflow propertiesDiv 忽略高度和溢出属性
【发布时间】：2017-11-23 07:47:12
【问题描述】：

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

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

【问题讨论】：

calc(100% - 80px);不会溢出，怎么滚动？
@DanielH 内容可能会溢出 div，此时会有滚动。
它已经在工作了？ jsfiddle.net/dalinhuang/h6Lam4rr
@DanielH 你错过了问题的重点......阅读规范......
100% 你是指父母的身高吗？还是当前窗口高度的 100%？

标签： css scroll overflow css-calc

【解决方案1】：

我的猜测是您希望将 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>

【讨论】：

【解决方案2】：

您遇到的问题是 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>

【讨论】：