CODEWITHSUNDEEP
htmlcss
Krzysztof
Krzysztof

Reputation: 91

How to make a scrollable div inside of a div with a specific height

I know that there were lot's of questions like this one, but I read them and didn't find an answer for my specific situation.

I have a PHP file that generates me a page with heavy amount of data. I want to make it more human friendly so I've created a column design, where each column has it's header, part with content and footer. I wan't to make the part with content scrollable, as it contains multiple divs with data inside.

What I want to achieve is What I want to achieve is

What I did yet achieve is What I did yet achieve is

and and

Yes, those are not original screenshots, but mockups of what I did get. It was easier to make them that way due to fact the data I want to display ain't to be publicly shared ;) You know, private things...

Here is my CSS and part of HTML (responsible for viewing one column):

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid gray;
  height: 95vh;
}

div.article-container {
  overflow: auto;
  position: relative;
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}
<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <article>
      <h2>Nazwa</h2>
      <h3>Data</h3>
      <p>Osoba</p>
    </article>
    <article>
      <h2>Nazwa</h2>
      <h3>Data</h3>
      <p>Osoba</p>
    </article>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

Can you please help me find an answer for: how to properly combine CSS and HTML here to get the fixed header, fixed footer and a scrollable space with content between them?

Thank you all in advance :)

Upvotes: 0

Views: 1557

Answers (3)

casraf
casraf

Reputation: 21694

If you play around with positioning, you might be able to work it out. The header/footer need to have a relatively static height though, as it needs to be used to position the article-container.

Example 1 (static heights)

* { box-sizing: border-box; }

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid;
  height: 95vh;
  position: relative; /* notice */
}

div.article-container {
  overflow: auto;
  position: absolute;

  /* notice */
  top: 82px; /* the header height */
  bottom: 39px; /* the footer height */
  left: 0; right: 0;
}

header {
  height: 82px; /* placeholder */
}

footer { /* notice */
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 39px; /* placeholder */
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}
<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

Example 2 (flexbox)

* { box-sizing: border-box; }

div.col {
  float: left;
  width: 22.5%;
  margin: 0px 10px 0px 10px;
  border: 1px solid;
  height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.article-container, footer, header {
  flex-basis: 0;
}

div.article-container {
  overflow-y: auto;
  flex-grow: 1;
}

header, footer {
  padding: 0.1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}

article {
  padding: 1em;
  overflow: hidden;
  border: 1px solid gray;
  margin: 10px;
  text-align: center;
}
<body>
  <div class="col">
    <header>
      <h4>Header text header text header text</h4>
    </header>
    <div class="article-container">
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
      <article>
        <h2>Nazwa</h2>
        <h3>Data</h3>
        <p>Osoba</p>
      </article>
    </div>
    <footer>Footer text footer text footer text</footer>
  </div>
</body>

Upvotes: 2

n3rdRick
n3rdRick

Reputation: 51

html, body {
    overflow: none;
}
.col {
    height: 95vh;
    overflow: none;
} 
.article-container {
    height: calc( 100% - [SUMMARY_OF_HEIGHT_OF_HEADER+HEIGHT_OF_FOOTER] );
    // this will give the article-container the correct height in every viewport;
    overflow: auto;
}

Upvotes: 0

jedifans
jedifans

Reputation: 2297

Your article container needs a fixed height for overflow auto to take effect:

div.article-container {
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  height: 80%;
}

Adjust height until it looks good :)

Edit: switched overflow auto to be only in the vertical direction as per @Martin's suggestion.

Upvotes: 1

Related Questions