受限于可用高度的可滚动元素
Scrollable elements bounded to available height
我正在尝试实现一个包含大量信息的 div 列系统，因此它们必须在其中有一个滚动条。一些元素将显示在这个网格的顶部（或不显示），并且列必须始终适合可用高度，重新调整它自己的高度以适应当前设置。
要实现的目标：
- 动态列高度设置，当更多元素显示在网站顶部时，它会调整到网站上的可用高度。
- 防止整个页面滚动，因为列保持相同的高度。
这是概念验证：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
P.S CSS Calc() 方法无法解决问题，因为可用高度会经常变化。
- 将 class
top-tiles 添加到您的 tiles div 并将 col-grid 添加到您的
columns div.
添加这些 CSS 属性：
.top-tile, .col-grid {
高度：100%；
最大高度：50vh；
溢出：自动；
}
正文{
overflow:hidden;
}
这是codepenlink查看结果-Codepen link
我所做的是为上面的内容 div 和下面的列网格区域分配 50vh space。这是最大值。 space 可以获取。如果没有内容，则只取高度可用内容的100%space。
好的。我刚刚将您的代码更改为我认为您想要的样子。请注意，我使用 display:inline-block 而不是 floatsi 我可以使用 white-space 属性.
关键是使用：
display: flex;
flex-flow: column;
在主容器中，flex-grow : 1; 在要适应可用的列上 space。
我用过 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>
已编辑
当您在评论中发表时，您希望在每一列上滚动...您可以使用非常简单的 javascript (jQuery) 来计算 header 容器高度，以便为列容器提供固定高度。然后只在列而不是容器中使用 overflow:auto。
看看这个JSFIDDLE
<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;
}
这应该可以解决问题，所以所有的列都在这个框架内并且整个页面不必滚动
我正在尝试实现一个包含大量信息的 div 列系统，因此它们必须在其中有一个滚动条。一些元素将显示在这个网格的顶部（或不显示），并且列必须始终适合可用高度，重新调整它自己的高度以适应当前设置。
要实现的目标：
- 动态列高度设置，当更多元素显示在网站顶部时，它会调整到网站上的可用高度。
- 防止整个页面滚动，因为列保持相同的高度。
这是概念验证：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
P.S CSS Calc() 方法无法解决问题，因为可用高度会经常变化。
- 将 class
top-tiles添加到您的tilesdiv 并将col-grid添加到您的columnsdiv. 添加这些 CSS 属性：
.top-tile, .col-grid { 高度：100%； 最大高度：50vh； 溢出：自动； }
正文{ overflow:hidden; }
这是codepenlink查看结果-Codepen link
我所做的是为上面的内容 div 和下面的列网格区域分配 50vh space。这是最大值。 space 可以获取。如果没有内容，则只取高度可用内容的100%space。
好的。我刚刚将您的代码更改为我认为您想要的样子。请注意，我使用 display:inline-block 而不是 floatsi 我可以使用 white-space 属性.
关键是使用：
display: flex;
flex-flow: column;
在主容器中，flex-grow : 1; 在要适应可用的列上 space。
我用过 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>
已编辑
当您在评论中发表时，您希望在每一列上滚动...您可以使用非常简单的 javascript (jQuery) 来计算 header 容器高度，以便为列容器提供固定高度。然后只在列而不是容器中使用 overflow:auto。
看看这个JSFIDDLE
<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;
}
这应该可以解决问题，所以所有的列都在这个框架内并且整个页面不必滚动