Scrollable elements bounded to available height

user_12391782 0
Viewed 74

I'm trying to achieve a divs column system that contains a huge amount of info, so they must have a scroll inside. Some elements will be displayed on top of this grid (or not) and the columns must always fit to the available height, readjusting it's own height to the current setup.

Goals to achieve:

  • Dynamic columns height setup that adjust to the available height on the website when more elements are displayed on top of it.
  • Preventing the whole page to have a scroll in it due the columns maintain the same height.

This is a proof of concept: https://jsfiddle.net/uqrt9wy6/

The structure it's something like this: 

<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() method won't make the trick because the available height will change very often.

responsiveness scrollable css html
3 Answers

Ok. I've just changed your code to looks like I think you want. Notice I have used display:inline-block insteed of floatsi I could use the white-space property.

The key is to use:

display: flex;
flex-flow: column;

in the main container and flex-grow : 1; on the columns you want to adapt to the avalaible space.

I have used height:100% I still prefer it over 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

Edited As you posted in your comment you want a scroll on each column... You could use a very simple javascript (jQuery)to calculate your header container height so to give a fixed height to the columns container. Then use overflow:auto just on the columns and not in the container.

Check it out in this JSFIDDLE

user_25509870
  1. Add class top-tiles with your tiles div and col-grid with your columns div.

  2. Add these CSS properties:

    .top-tile, .col-grid { height: 100%; max-height: 50vh; overflow: auto; }

    body { overflow:hidden; }

Here is the codepen link to see the results - Codepen link

What I did is assign 50vh space for upper content div and lower columns grid area. This is the max. space it can acquire. If there is no content, it will only take the 100% space of available content in height.

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

this should do the trick, so all the columns are withing this frame and the whole page doesn't have to scroll

user_98066670
Related