Div игнорирует свойства высоты и переполнения

Question

Div игнорирует свойства высоты и переполнения

Я пытаюсь сделать div с height: calc(100% - 80px) и overflow: scroll, 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>

Пожалуйста, предупредите меня, где я иду не так и как решить проблему.

1

css css3 scroll overflow css-calc

Источник

20 июн '17 в 16:35

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>

0

Источник

user4963142 20 июн '17 в 16:47

Другие вопросы по тегам css css3 scroll overflow css-calc

user4739018 20 июн '17 в 17:00 2017-06-20 17:00 · Accepted Answer · 2017-06-20 17:00

Я думаю, вы хотите сделать 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>