Блог

Я хочу добавить вертикальную полосу прокрутки в родительский div, поскольку высота дочернего элемента намного больше высоты родительского div в приведенной ниже настройке. Я читал в школе W3, что по умолчанию overflow: auto; so он добавит полосу прокрутки, если высота дочернего div превышает высоту родительского div. Но приведенная ниже настройка не оправдывает этого. Помогите мне разобраться в этом.

Согласно W3 school CSS doc,

Если для высоты задано числовое значение (например, пиксели, (r) em, проценты), то, если содержимое не помещается в пределах указанной высоты, оно переполнится. То, как контейнер будет обрабатывать переполненное содержимое, определяется свойством overflow .

Как мы можем обосновать приведенное выше утверждение?

 .parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
} 

 <div class="parentDiv">
  <div class="childDiv">

  </div>
</div> 

@Отредактировано: по умолчанию overflow: visible; это не автоматически. Я прочитал это неправильно.

Это имеет смысл. Предоставленный вами CSS-код отображает страницу следующим образом

Здесь ширина как родительского, так и дочернего элемента одинакова, поэтому вы не можете наблюдать переполнение. Внесите небольшое изменение в ширину дочернего элемента, чтобы родительский элемент был виден следующим образом

 .parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 100px;
}
 

Теперь вывод будет

Как мы можем видеть, «элемент розового цвета» — это дочерний элемент, который имеет большее значение свойства высоты, чем родительский переполняется.

По умолчанию значение переполнения равно visible . Таким образом, мы можем видеть, что элемент переполняет родительский элемент.

Потому что дочерний элемент переполняет родительский. Мы должны определить overflow свойство для родительского элемента.

Как говорится в документе, который вы связали с w3, если для свойства overflow установлено значение auto , оно добавит полосу прокрутки, если содержимое переполнено

Вот codepen, демонстрирующий то же самое.

Для лучшего понимания я изменил width и margin дочернего элемента.

Пожалуйста, дайте мне знать, если это оправдывает утверждение

Используйте максимальную высоту вместо ширины, поэтому, если дочерняя высота меньше родительской, она будет отображаться без прокрутки, иначе она получит максимальную высоту и добавит прокрутку переполнения

 .parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  max-height: 100px;
  width: 200px;
   overflow-y:scroll;
} 

   
<div class="parentDiv">
  <div class="childDiv">
    <br>abc<br>def<br>ghi<br>jkl<br>mno
  </div>
</div>
<br><br><br>
   

<div class="parentDiv">
  <div class="childDiv">
    1 line
  </div>
</div> 

Не могли бы вы проверить приведенный ниже код? Надеюсь, это сработает для вас.

Мы установили max-height и overflow-y: auto; overflow-x: hidden; в .parentDiv, поэтому, когда высота .childDiv больше, чем .parentDiv будет прокручиваться, иначе полоса прокрутки автоматически скроется.

Здесь мы установили max-height , потому что, когда высота .childDiv меньше высоты .parentDiv, тогда высота .parentDiv будет установлена в соответствии с высотой блока .childDiv .

 .parentDiv {
  background-color: coral;
  max-height: 50px;
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
} 

 <div class="parentDiv">
  <div class="childDiv">
  </div>
</div> 

Пожалуйста, обратитесь к этой ссылке: https://jsfiddle.net/yudizsolutions/ev4qou6c/2 /

Все текущие (по состоянию на 28 января 2021 года) ответы используют дочерний элемент фиксированной высоты. Хотя это может быть то, что вы хотите, мне нужно, чтобы дочерний элемент (и, следовательно, родительский элемент) использовал всю доступную высоту страницы, но при этом мог прокручивать дочерний элемент.

Если это то, чего хотят другие люди, то вы можете использовать flex column для достижения этой цели следующим образом — очевидно, вам нужно уменьшить максимальную скорость вашего браузера, чтобы заставить тело прокручивать (вы можете переключить ‘overflow-y: auto’ на ‘overflow-y: scroll’если вы хотите, чтобы элемент управления прокруткой всегда отображался):

 html, body {
  height: 100%;
  margin: 0;
}

.header {
  background: green;
}

.scrollable-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scrollable-body {
  background: blue;
  padding: 10px;
  overflow-y: auto;  
} 

 <div class="scrollable-container">
  <div class="header">
    <h1>Header section</h1>
    <blockquote>What is it: Fixed header, scrollable body</blockquote>
  </div>
  <div class="scrollable-body">
    <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>      
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
  </div>
</div>