Bootstrap 4.1 flex 50% -высокий список прокрутки

Question

Попытка создать полноэкранный макет с верхней и нижней половиной. Верхняя половина должна содержать список элементов, у которых должна быть полоса прокрутки, если она превышает половину высоты экрана.

После некоторых поисков мне удалось найти работоспособное решение, используя следующую разметку:

<div id="app">
  <main role="main" class="container-fluid d-flex">
    <div class="row flex-fill bg-primary" style="min-height:100vh;">
      <div class="col-sm h-100">
        <div class="row h-50 bg-warning" style="overflow:scroll;">
          <div class="col-sm">
            <div>
              <ul class="">
                <li class="">Series 100</li>
                <li class="">Series 200</li>
                <li class="">Series 300</li>
                <li class="">Series 400</li>
                <li class="">Series 500</li>
                <li class="">Series 600</li>
                <li class="">Series 700</li>
                <li class="">Series 800</li>
                <li class="">Series 900</li>
                <li class="">Series 1000</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row h-50 bg-success">
          <div class="col-sm">
            <div>
              test
            </div>
          </div>
        </div>
      </div>
    </div> 
  </main>
</div>

http://jsfiddle.net/0zbcr7mg/4/ (убедитесь, что окно вывода уменьшено до точки, в которой не помещается весь список)

Однако, как только я добавил больше элементов в список, макет вышел из строя - в списке все еще была полоса прокрутки, но она занимала более 50% высоты окна вывода:

http://jsfiddle.net/0zbcr7mg/3/

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

Answer 1

Вы можете проверить следующий подход для того, что вы ищете:

1) Элементу root всегда должно быть присвоено значение 100vh.

2) Основной макет - один row, использующий два набора col-12, и каждый из них имеет ровно 50% из height.

Я также заполнил список ul из Javascript для поддержания разметки в чистоте.

$(document).ready(function()
{

    for (var i = 100; i <= 2000; i += 100)
    {
        $(".custom-list").append("<li>Series " + i + "</li>");
    }
    
});

#app {
    height: 100vh;
}

#bottom-section, #top-section {
    overflow-y: scroll;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<div id="app">
<main role="main" class="container-fluid h-100">
<div class="row bg-primary h-100">

  <div id="top-section" class="col-12 h-50 bg-warning">
    <ul class="custom-list"></ul>
  </div>

  <div id="bottom-section" class="col-12 h-50 bg-success">
    <div>test</div>
  </div>
</div>
</main>
</div>

Answer 2

Вам просто нужно изменить строку min-height:100vh на height:100vh ...

http://jsfiddle.net/tokep2gn/

<div id="app">
    <main role="main" class="container-fluid d-flex">
        <div class="row flex-fill bg-primary" style="height: 100vh;">
            <div class="col-sm h-100">
                <div class="row h-50 bg-warning" style="overflow:scroll;">
                    <div class="col-sm">
                        <div>
                            <ul class="">
                                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                <li class="">Series 100</li>
                                <li class="">Series 200</li>
                                <li class="">Series 300</li>
                                <li class="">Series 400</li>
                                <li class="">Series 500</li>
                                <li class="">Series 600</li>
                                <li class="">Series 700</li>
                                <li class="">Series 800</li>
                                <li class="">Series 900</li>
                                <li class="">Series 1000</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row h-50 bg-success">
                    <div class="col-sm">
                        <div>
                            test
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </main>
</div>

Answer 3

Вы должны быть в состоянии немного упростить свой код, используя 2x секции с высотой области просмотра 50%, как это

HTML

<section id="top">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>
<section id="bottom">
  <ul>
    <li class="">Series 100</li>
    <li class="">Series 200</li>
    <li class="">Series 300</li>
    <li class="">Series 400</li>
    <li class="">Series 500</li>
    <li class="">Series 600</li>
    <li class="">Series 700</li>
    <li class="">Series 800</li>
    <li class="">Series 900</li>
    <li class="">Series 1000</li>
  </ul>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

#top {
  height: 50vh;
  background-color: dodgerblue;
  overflow: auto; /* Allows for scroll without scrollbars created by overflow: scroll;  */
}

#bottom {
  height: 50vh;
  background-color: tomato;
  overflow: auto;
}

Надеюсь, это поможет 100