Автоматическое переполнение при неизвестной высоте детей

Question

У меня есть элемент (на котором я знаю ширину и высоту, я не могу удалить высоту) с некоторыми элементами внутри. Я упростил его во фрагменте, поэтому у меня есть только заголовок (неизвестной длины) и список. Мне нужно, чтобы список (только список, а не весь контейнер) был overflow: auto, но я не могу его понять, так как не знаю его высоты и не могу использовать flexbox (IE9 +: /).

Я хочу избежать использования для этого JavaScript (я могу сделать это в JavaScript, но мне действительно не нужен FOUC).

div {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
}

h1 {
  margin-top: 0;
  border: 1px dashed red;
}

ul {
  margin: 0;
  padding: 0;
  overflow: auto;
}

li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
}

<div>
  <h1 contenteditable>
    My long title that can be on multiple lines
  </h1>
  <ul>
    <li>a list</li>
    <li>of element</li>
    <li>that can</li>
    <li>be long</li>
    <li>that should</li>
    <li>overflow auto</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
    <li>bla</li>
  </ul>
</div>

css

1

Calvein 8 Сен 2016 в 03:13

Answer 1

Вот мое решение JS на данный момент, я бы хотел, чтобы оно было в CSS, если возможно, но пока оно работает:

const height = container.clientHeight - list.offsetTop
list.style.height = height + 'px'

0

Calvein 8 Сен 2016 в 01:57

Answer 2

Просто добавьте overflow-y: auto; к вашему элементу контейнера

.wrapper {
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: auto;
  display: inline-block;
}

h1 {
  margin-top: 0;
  border: 1px dashed red;
  float: left;
}
.container {
  overflow-y: auto;
  height: 300px;
  width: 100%;
  float: left;
}
ul {
  margin: 0;
  padding: 0;
  overflow: auto;
}

li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
  word-break: break-word;
}

<div class="wrapper">
  <h1 contenteditable>
    My long title that can be on multiple lines
  </h1>
  <div class="container">
    <ul>
      <li>a list</li>
      <li>of element</li>
      <li>that can</li>
      <li>be long</li>
      <li>that should</li>
      <li>overflow auto</li>
      <li>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
    </ul>
  <div>
</div>

0

Rudi Urbanek 8 Сен 2016 в 00:41

Answer 3

Если вы не можете использовать flexbox, используйте таблицы CSS:

Установите высоту стола
Установите height: 0 в ячейку заголовка, чтобы она была ровно настолько высокой, насколько требуется ее содержимым.
Оберните ul внутри строки таблицы, которая займет оставшееся пространство, оставленное заголовком.
Возьмите ul вне потока (чтобы избежать циклических определений) и сделайте его такого же размера, как эта оболочка.

#container {
  display: table;
  margin: 20px;
  padding: 15px;
  border: 1px solid;
  width: 200px;
  height: 400px;
}
#container > h1 {
  display: table-cell;
  height: 0;
  margin-top: 0;
  border: 1px dashed red;
}
#container > div {
  display: table-row;
  position: relative;
}
#container ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: auto;
}
li {
  display: block;
  padding: 5px 0;
  border-top: 1px solid;
}

<div id="container">
  <h1 contenteditable>
    My long title that can be on multiple lines
  </h1>
  <div>
    <ul>
      <li>a list</li>
      <li>of element</li>
      <li>that can</li>
      <li>be long</li>
      <li>that should</li>
      <li>overflow auto</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
      <li>bla</li>
    </ul>
  </div>
</div>

0

Oriol 8 Сен 2016 в 00:44

Answer 4

Вы не можете сделать высоту обоих динамическими без чего-то вроде JavaScript.

Для переполнения нужна ссылка. Почему, например, переполняется список, а не заголовок?

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

Я думаю, что без чего-то вроде гибкости другим вариантом будет JS.

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

0

Meligy 8 Сен 2016 в 00:37

Автоматическое переполнение при неизвестной высоте детей

4 ответа

Похожие вопросы

Новые вопросы

css