限制在可用高度的可滚动元素答案

【问题标题】：Scrollable elements bounded to available height限制在可用高度的可滚动元素
【发布时间】：2020-03-02 10:59:10
【问题描述】：

我正在尝试实现一个包含大量信息的 divs 列系统，所以它们里面必须有一个滚动条。某些元素将显示在此网格的顶部（或不显示），并且列必须始终适合可用高度，将其自身的高度重新调整为当前设置。

要实现的目标：

动态列高度设置，当更多元素显示在网站上时，会调整到网站上的可用高度。
由于列保持相同的高度，防止整个页面在其中滚动。

它的结构是这样的：

<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

P.S CSS Calc() 方法不会成功，因为可用高度会经常变化。

【问题讨论】：

可能是这样的？ codepen.io/karolpodlesny/full/npKqu
顶部没有任何元素，因此该示例不适合该问题。当更多元素位于其顶部时，我需要列网格重新调整其高度，而不会使整个页面变为滚动。

标签： html css scrollable responsiveness

【解决方案1】：

好的。我刚刚将您的代码更改为我认为您想要的样子。请注意，我使用了display:inline-block 而不是floatsi，我可以使用white-space 属性。

关键是要使用：

display: flex;
flex-flow: column;

在主容器中，flex-grow : 1; 在要适应可用空间的列上。

我用过height:100% 我还是更喜欢它而不是vhunits：

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

已编辑 正如您在评论中发布的那样，您希望在每列上滚动...您可以使用非常简单的javascript (jQuery)来计算标题容器高度，以便为列容器提供固定高度。然后在列上而不是在容器中使用overflow:auto。

查看此JSFIDDLE

【讨论】：

我真的很感谢你的努力，但我需要在每列内有一个滚动而不是整个列包装器。
我做了一些改动。检查一下，以防你可以使用它。
仍然不能发挥我想要的魔力，因为我想不用任何 javascript，但它可以解决问题并且是一个很好的答案。谢谢！

【解决方案2】：

将top-tiles 类添加到您的tiles div 和col-grid 到您的 columnsdiv。
添加这些 CSS 属性：

.top-tile, .col-grid { 高度：100%；最大高度：50vh；溢出：自动； }

身体{ 溢出：隐藏； }

这是查看结果的 codepen 链接 - Codepen link

我所做的是为上部内容 div 和下部列网格区域分配 50vh 空间。这是最大值。它可以获得的空间。如果没有内容，则只占用可用内容高度的 100% 空间。

【讨论】：

感谢您的回答，但我需要用列填充所有可用空间。
然后您可以将 min-height 添加到 .top-tile、.col-grid（例如 10vh）以使列始终可用。
问题是我需要它是“灵活的”，所以无论顶部元素有多大，或者列网格顶部有多少元素，列都会重新调整它的高度到可用空间。
是的，它会很灵活。如果没有内容--> min-height of 10vh 将使列可用您给定的最小空间，如果有一些内容--> height: 100% 将处理它，如果有大量内容--> 50vh 的 max-height 会将其限制为半屏空间。

【解决方案3】：

  <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;
}

这应该可以解决问题，所以所有列都在这个框架内，整个页面不必滚动

【讨论】：