Блог

Главная - Вопросы по программированию - Как заставить div прокручиваться вместо превышения высоты страницы? (Bootstrap 5)

Как заставить div прокручиваться вместо превышения высоты страницы? (Bootstrap 5)

#css #twitter-bootstrap #scroll

#css #twitter-bootstrap #прокрутка

Вопрос:

Только текст foo bar foo bar foo bar foo bar и т.д. Должен прокручиваться в пределах двух параллельных разделов.

НЕ на всю страницу.

Как этого добиться?

Вещи, которые я пробовал:

  • Устанавливаем для них overflow значение auto (без эффекта)

  • Дополнительно устанавливая их высоту в жестко заданное значение пикселя (работает, но не может использовать это, потому что высота экрана просмотра неизвестна)

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2 k9luXQOfXJCJ4I" crossorigin="anonymous">
  </head>
  <body>
    <div class='container-fluid h-100'>
      <div class=row>
        <div class=col>
          <audio controls>
            <source src=index.mp3>
           </audio>
        </div>
      </div>
      <div class=row>
        <div class='col d-flex justify-content-center'>
          <div id=banner>
            <button>Slow / Fast</button>
          </div>
        </div>
      </div>
      <div class=row>
        <div class='col d-flex justify-content-center'>
          <div>
            <div>foo</div>
            <hr>
            <div>bar</div>
          </div>
        </div>
      </div>
      <div class=row>
        <div class='col'>
          <div>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </div>
        </div>
        <div class='col'>
          <div>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </div>
        </div>
      </div>
    </div>
  </body>

</html>

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

1. Разве вы не можете использовать высоту 100vh?

2. Почему я должен хотеть, чтобы 2 нижних раздела составляли 100% высоты экрана? Это затмило бы все остальное на странице.

Ответ №1:

Если мы сделаем весь контейнер фиксированным, высотой 100vh и display: flex и заключим последнюю строку в изогнутый div, мы сможем заставить его заполнить оставшееся вертикальное пространство в окне и прокручивать его, не перемещая первые 3 строки.

Вот измененный код:

     <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2 k9luXQOfXJCJ4I" crossorigin="anonymous">
      </head>
      <body>
        <div class='container-fluid h-100' style="position:fixed;display: flex;flex-flow: column;">
          <div class="row" style="flex:0;">
            <div class=col>
              <audio controls>
                <source src=index.mp3>
               </audio>
            </div>
          </div>
          <div class="row" style="flex:0;">
            <div class='col d-flex justify-content-center'>
              <div id=banner>
                <button>Slow / FastSlow</button>
              </div>
            </div>
          </div>
          <div class="row" style="flex:0;">
            <div class='col d-flex justify-content-center'>
              <div>
                <div>foo</div>
                <hr>
                <div>bar</div>
              </div>
            </div>
          </div>
          <div style="overflow-y:auto;overflow-x:hidden;">
          <div class="row">
            <div class='col'>
              <div>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </div>
            </div>
            <div class='col'>
              <div>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar </div>
            </div>
          </div>
          </div>
        </div>
      </body>
    
    </html>

Обратите внимание, что наблюдается некоторая потеря общности, поскольку для первых 3 строк — неподвижной части — теперь установлено значение flex: 0