Прокручиваемые элементы ограничены доступной высотой - PullRequest
Новая
       46

Прокручиваемые элементы ограничены доступной высотой

2 голосов
/ 02 марта 2020

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

Цели, которые необходимо достичь:

  • Динамические c Настройка высоты столбцов, которая корректируется в соответствии с доступной высотой на веб-сайте, когда на ней отображается больше элементов.
  • Предотвращение прокрутки всей страницы, поскольку столбцы поддерживают одинаковую высоту.

Это подтверждение концепции: https://jsfiddle.net/uqrt9wy6/

Структура выглядит примерно так: 

<body>
  <div> // Where all the app will be wrapped
    <div> // header menu
      <div> // some info tiles that will be displayed or not, in case they are displayed the columns must adjust it's own height to the available.
        <div> // Columns div
          <div> // col 1
          <div> // col 2
          <div> // col 3

PS CSS Метод Cal c () не сработает, потому что доступная высота будет меняться очень часто.

Ответы [ 3 ]

1 голос
/ 02 марта 2020

Хорошо. Я только что изменил ваш код, чтобы выглядело так, как я думаю, вы хотите. Обратите внимание, что я использовал display:inline-block insteed float si. Я мог бы использовать свойство white-space.

Ключ должен использовать: 

display: flex;
flex-flow: column;

в основном контейнере и flex-grow : 1; в столбцах, которые вы хотите адаптировать к доступному пространству.

Я использовал height:100% Я все еще предпочитаю это над vh единицами: 

body, html {

    margin: 0;
    height:100%;

}
#app-context {
    width: 100%;
    /*height: 100%;*/
    margin: 0;
    background-color: grey;
    height: 100%;
    display: flex;
    flex-flow: column;
    
}

.columns {

    /*height: 100%;*/
    /*height: 100vh;*/
    background-color: lightblue;
    overflow:auto;
    white-space:nowrap;
    flex-grow : 1;

}

.column {
    display:inline-block;
    width: 340px;
    overflow:auto;
    background-color: lightgoldenrodyellow;
    white-space:normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    
    <title>Document</title>
</head>
<body>
    
    <div id="app-context">

        <div class="header-menu"></div>

        <div class="tiles">

            <div class="tile">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?</div>
            <div class="tile">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit, unde. Numquam autem natus molestias eveniet repellat blanditiis ipsa ea. Unde reiciendis dolore et aliquam vero in architecto beatae modi dicta.</div>
            <div class="tile">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt deleniti aperiam sint praesentium voluptas ratione dolorem aliquam velit dignissimos. Ea accusantium maxime accusamus ducimus sed! Explicabo sequi quis debitis magni!</div>
            <div class="tile">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis natus ipsa inventore numquam quisquam, reiciendis quis earum nemo officiis et tempora magni obcaecati maxime incidunt velit voluptas alias nobis necessitatibus!</div>


        </div>

        <div class="columns">

            <div class="column">
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                

                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                

                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                

                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                

                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                

            </div>


            <div class="column">
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?

                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?

                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
            </div>
            <div class="column">

                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
            </div>
            <div class="column">
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
            </div>

            <div class="column">
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
               
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                </div>
                
                <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum earum hic voluptas possimus? Possimus ab magni sequi veniam obcaecati? Laudantium et, saepe porro necessitatibus quibusdam commodi expedita neque natus laboriosam?
                    
                </div>
                
            </div>


        </div>

    
</body>
</html>

JSFIDDLE

Отредактировано Когда вы добавили в свой комментарий, вы хотите прокрутить каждый column ... Вы можете использовать очень простое javascript (jQuery) для вычисления высоты контейнера заголовка, чтобы задать фиксированную высоту для контейнера столбцов. Затем используйте overflow:auto только для столбцов, а не для контейнера.

Проверьте это в этом JSFIDDLE

0 голосов
/ 02 марта 2020 
  <body>
  <div id = "wrapper"> // Where all the app will be wrapped
    <div> // header menu
      <div> // some info tiles that will be displayed or not, in case they are 
           displayed the columns must adjust it's own height to the available.
        <div> // Columns div
          <div> // col 1
          <div> // col 2
          <div> // col 3

******************************************** *********CSS************************************** *****************

#wrapper{
border 1px solid;
 overflow: scroll;
}

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

0 голосов
/ 02 марта 2020
  1. Добавьте класс top-tiles с вашим tiles div и col-grid с вашим columns div.

  2. Добавьте эти CSS свойства:

    .top-плитка, .col-grid {высота: 100%; максимальная высота: 50vh; переполнение: авто; }

    body {overflow: hidden; }

Вот ссылка на кодовый блок, чтобы увидеть результаты - Ссылка на кодовый блок

Что я сделал, так это назначил 50vh пространства для верхнего содержимого div и ниже площадь сетки столбцов. Это макс. пространство, которое он может приобрести. Если контента нет, он займет только 100% пространства доступного контента по высоте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...