CSS Overflow auto и его работа - PullRequest
Новая
       6

CSS Overflow auto и его работа

0 голосов
/ 27 августа 2018

Я пытаюсь выяснить свойство переполнения

Таким образом, для посредничества элемента с помощью свойства margin:auto определено width, но
, что требуется для центрирования элементавертикально относительно его контейнера / родительского элемента?

При текущем настроенном переполнении происходит так,
, когда переполнение автоматически расширяет контейнер, чтобы соответствовать элементу переполнения ??? 

div {
  margin: 200px auto;
  height: 100%;
  width: 60%;
  border: 10px solid red;
  text-align: center;
}

body {
  height: 300px;
  min-height: 500px;
  padding: 0;
  border: 10px solid yellow;
  overflow: auto;
}
<div>
  somet text
</div>

1 Ответ

0 голосов
/ 27 августа 2018

Несколько слов о вашем текущем коде:

  1. Если вы хотите, чтобы ваш div был прокручиваемым, вы должны включить автоматический переполнение на свой div.Помещение его в контейнер верхнего уровня приведет к тому, что вы никогда не увидите правильные полосы прокрутки.
  2. У вас есть левое / правое поле 200 пикселей на каждый элемент div.Есть ли причина для этого типа маржи?Может быть, это можно исправить немного лучше, используя более структурированный макет.Например, таблицы или плавающие div.Я думаю, что ваш запас в 200px может начать казаться странным, когда размер окна изменится.

Чтобы ответить на ваш вопрос, я думаю, что вы можете легко сделать то, что вы хотите, с помощью новой опции отображения flexbox.Вот пример: 

body {
  padding: 0;
  border: 10px solid yellow;
  height: 300px;
  display: flex;
}

div {
  height: 60%;
  width: 60%;
  border: 1px solid red;
  text-align: center;
  overflow: auto;
  margin: auto;
}
<div>
  somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br>
</div>
...