Как я могу остановить элемент <ul>от переполнения границ его контейнера?

Question

Я пытаюсь создать простой блок с фиксированной высотой в CSS, с заголовком вверху и списком элементов произвольной длины ниже.Я бы хотел, чтобы только список можно было прокручивать, а заголовок оставался видимым и фиксированным сверху.

Воткодовая ручка:
https://codepen.io/anon/pen/qJRBpo?editors=1100

<div class="outerdiv">
  <h4>This is my title</h4>

  <div class="innerdiv">
    <ul>
      <li> List item 1 </li>
      <li> List item 2 </li>
      <li> [...] </li>
    </ul>
  </div>
</div>

Я бы подумал, что установки overflow: auto для элементов .innerdiv или ul будет достаточно, но эти два элемента, по-видимому, имеют размеры в соответствии ссодержимое <ul>, полностью игнорируя границы поля .outerdiv.

Я не нашел способа заставить элементы .innerdiv или ul расти не больше, чем размер .outerdiv.Они всегда изменяют размер независимо от остальной части макета, и затем, в зависимости от настройки overflow: visible|auto на .outerdiv, лучшее, что я могу сделать, это обрезать или прокрутить все содержимое .outerdiv, включая заголовок.

Answer 1

Пожалуйста, посмотрите пример кода:

.main{
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 50%;
  
}
.outerdiv {
  position: fixed;
  background: #999;
  width: 50%;
  color: #fff;
}

.outerdiv h4{
  padding-left: 28px
}

.innerdiv{
  margin-top: 70px
}

.innerdiv ul {
  margin: 0;
  padding: 0;
  list-style:none;
  overflow-y: scroll;
  height: 300px
}


.innerdiv ul li{
  margin-left:20px
}

<div class="main">
<div class="outerdiv">
  <h4>This is my title</h4>
 </div>
 <div class="innerdiv">
    <ul>
      <li> List item 1 </li>
      <li> List item 2 </li>
      <li> List item 3 </li>
      <li> List item 4 </li>
      <li> List item 5 </li>
      <li> List item 6 </li>
      <li> List item 7 </li>
      <li> List item 8 </li>
      <li> List item 9 </li>
      <li> List item 10 </li>
      <li> List item 11 </li>
      <li> List item 12 </li>
      <li> List item 13 </li>
      <li> List item 14 </li>
      <li> List item 15 </li>
      <li> List item 16 </li>
      <li> List item 17 </li>
      <li> List item 18 </li>
      <li> List item 19 </li>
      <li> List item 20 </li>
      <li> List item 21 </li>
      <li> List item 22 </li>
      <li> List item 23 </li>
      <li> List item 24 </li>
      <li> List item 25 </li>
      <li> List item 26 </li>
      <li> List item 27 </li>
      <li> List item 28 </li>
      <li> List item 29 </li>
      <li> List item 30 </li>
    </ul>
  </div>
  </div>

Answer 2

Позиция: фиксированная - это то, что вы ищете, я думаю.

* {
    box-sizing: border-box;
}
.outerdiv {
    width: 170px;
    position: relative;
    border: 1px solid #ccc;
}
.outerdiv h4 {
    position: fixed; /* header fixed to top */
    top:0;
    margin: 0;
    padding: 8px;
    background: #fff; /* so you can't see items behind h4 when scrolling */
}
.innerdiv {
    overflow-x: hidden;
    overflow-y: auto;
}
.innerdiv ul {
    display: block;
    max-height: 100px; /* height of ul */
    margin: 0;
}
.innerdiv ul li {
    width: 100%;
    padding: 5px 10px;
}

Answer 3

ul{
height:70%;
overflow:auto;
}
.outerdiv {
 
  margin: 10px;
  
 
}
.innerdiv {
  background-color: #9cfff14a;
  height:70%;
}

.outerdiv{
height:200px;
}

<div class="outerdiv">
  <h4>This is my title</h4>

  <div class="innerdiv">
    <ul>
      <li> List item 1 </li>
      <li> List item 2 </li>
      <li> List item 3 </li>
      <li> List item 4 </li>
      <li> List item 5 </li>
      <li> List item 6 </li>
      <li> List item 7 </li>
      <li> List item 8 </li>
      <li> List item 9 </li>
      <li> List item 10 </li>
      <li> List item 11 </li>
      <li> List item 12 </li>
      <li> List item 13 </li>
      <li> List item 14 </li>
      <li> List item 15 </li>

      
    </ul>
  </div>
</div>

Answer 4

Используйте flexbox:

.outerdiv {
  height: 300px;
  display: flex;
  flex-direction: column;
  ...
}

.innerdiv {
  flex: 1; /* take available space */
  overflow: auto;
  ...
}

---

.outerdiv {
  border: 1px solid black;
  margin: 10px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.outerdiv h4 {
  border-bottom: 1px dotted grey;
  margin: 0;
  padding: 20px;
}

.innerdiv {
  background-color: #9cfff14a;
  flex: 1;
  overflow: auto;
}

<div class="outerdiv">
  <h4>This is my title</h4>
  <div class="innerdiv">
    <ul>
      <li> List item 1 </li>
      <li> List item 2 </li>
      <li> List item 3 </li>
      <li> List item 4 </li>
      <li> List item 5 </li>
      <li> List item 6 </li>
      <li> List item 7 </li>
      <li> List item 8 </li>
      <li> List item 9 </li>
      <li> List item 10 </li>
      <li> List item 11 </li>
      <li> List item 12 </li>
      <li> List item 13 </li>
      <li> List item 14 </li>
      <li> List item 15 </li>
      <li> List item 16 </li>
      <li> List item 17 </li>
      <li> List item 18 </li>
      <li> List item 19 </li>
      <li> List item 20 </li>
      <li> List item 21 </li>
      <li> List item 22 </li>
      <li> List item 23 </li>
      <li> List item 24 </li>
      <li> List item 25 </li>
      <li> List item 26 </li>
      <li> List item 27 </li>
      <li> List item 28 </li>
      <li> List item 29 </li>
      <li> List item 30 </li>
    </ul>
  </div>
</div>

Answer 5

Мб примерно так:

.outerdiv {
  border: 1px solid black;
  margin: 10px;
  height: 300px;

  overflow: hidden;
}
.innerdiv {
  background-color: #9cfff14a;

  height: 100%;
  overflow-y: scroll;
}