Div忽略高度和溢出属性

时间：2017-06-20 16:35:30

标签： css css3 scroll overflow css-calc

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

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

#tutorial {
    padding: 5%;
}
＆＃13; 
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>
＆＃13;
＆＃13;
＆＃13;

请提醒我出错的地方以及如何解决问题。

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

我的猜测是你希望将div 100% - 80px设为当前窗口高度。为此，您可以使用100vh

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

#tutorial {
    padding: 5%;
}
＆＃13; 
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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题