Могу ли я заставить HTML <ul>иметь фиксированный размер для создания SPA? - PullRequest
Новая
       1

Могу ли я заставить HTML <ul>иметь фиксированный размер для создания SPA?

0 голосов
/ 24 октября 2019

Я хочу сделать СПА для проекта. Идея заключается в том, что люди могут подключиться к сайту с помощью PIN-кода или чего-то еще. На своих телефонах они могут задавать вопросы вместе со своими именами. Все вопросы отображаются в виде вертикального неупорядоченного списка на боковой панели слева, выбранный вопрос отображается большим в центре, а все ответы на вопросы перемещаются в аналогичный список на боковой панели справа.

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

Что я пробовал:

  • Я пытался установить height иmax-height свойства до 100vh и установка overflow-y для прокрутки, но на самом деле не позволяли мне прокручивать список.

В таблице стилей: 

li {
  text-align: left;
  font-family: 'Quicksand', sans-serif;
  list-style-type: none;

  overflow-y: auto;
  max-height: 100vh;
  height: 100vh;
}

Ив моем HTML: 

 <body>
    <script src="backend.js"></script>
    <div class="wrapper">
      <div class="vragenLijst">
        <ul style="padding-left: 10px; padding-right: 10px" id="lijst">
          <li>
            <div>
              <p class="vrager">Persoon 1</p>
              <br>
              <p class="vraagt">vraagt:</p>
              <br>
              <p class="vraagEl">Dit is mijn vraag.</p>
            </div>
          </li>
          <li>
            <div>
              <p class="vrager">Persoon nummer twee</p>
              <br>
              <p class="vraagt">vraagt:</p>
              <br>
              <p class="vraagEl">Hier komt mijn vraag dan, zeer origineel.</p>
            </div>
          </li>
          <li>
            <div>
              <p class="vrager">Persoon nummer 3</p>
              <br>
              <p class="vraagt">wilt weten:</p>
              <br>
              <p class="vraagEl">En wederom wat opvultekst hier.</p>
            </div>
          </li>
          <li>
            <div>
              <p class="vrager">Vierde persoon</p>
              <br>
              <p class="vraagt">wilt weten:</p>
              <br>
              <p class="vraagEl">Zo he, een vierde vraag? Allemachtig...</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="vergroot">
        <p id="groteVrager">Naam</p>
        <p id="groteVraagt">vraagt:</p>
        <p id="groteVraag">vraag</p>
        <input type="button" value="Volgende vraag" class="button" onclick="nieuweVraag()">

        <input type="button" value="JA" class="button" onclick="nieuweVraag(0)">
        <input type="button" value="NEE" class="button" onclick="nieuweVraag(1)">
        <input type="button" value="NIET RELEVANT" class="button" nieuweVraag(2)="antwoord(2)">


      </div>
      <div class="sidebar">
        <ul id="beantwoordeVragen">

        </ul>
      </div>
    </div>
    <div class="footer">
      Idee en code door Simeon Duwel, gelicenciëerd onder MIT ca. 2019
    </div>
  </body>

1 Ответ

0 голосов
/ 25 октября 2019

Настройка overflow-y:auto и height: <desired-height> на ul должна работать.

Например, ниже у меня есть ul с высотой 50 vh. В демонстрационных целях у меня есть жёлтый div с 100vh. Как вы можете видеть, высота ul фиксируется как половина от div, и любые свитки переполнения. 

ul {
  height: 50vh;
  background-color:white;
  overflow-y:auto;
}

li {
  height: 10vh;
}

body,ul {
   margin:0;
}
<div style="height:100vh;background-color:yellow">
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
    <li>Test 8</li>
    <li>Test 9</li>
    <li>Test 10</li>
  </ul>
</div>
...