Блог

Главная - Вопросы по программированию - Отображать полосы прокрутки для переполненного содержимого только в родительском контейнере

Отображать полосы прокрутки для переполненного содержимого только в родительском контейнере

#html #css

#HTML #css

Вопрос:

Чего я пытаюсь добиться, так это иметь только полосы прокрутки в div с overflow: auto . Почему я вижу дополнительную вертикальную полосу прокрутки в теле?

 <div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Ответ №1:

Добавляя overflow: hidden к родительскому, вы деактивируете полосы прокрутки, также вы дополнительно можете добавить:

 *,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Это будет работать следующим образом:

 *,
::after,
::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
}  
 <div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Ответ №2:

Удалите поля и отступы из контейнера документа следующим образом:

 html, body {
  margin: 0;
  padding: 0;
}
  

 html, body {
  margin: 0;
  padding: 0;
}  
 <div style="overflow: auto; height: 100vh; width: 100%;">
    <div style="width: 4000px;height: 4000px;background: green;">       </div>
</div>

Комментарии:

1. Думаю, мне стоит немного поспать… Спасибо!