1

I have the following snippet in my page:

<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of header content.</div>
    </div>
    <div class="body">
      <div>Arbitrary amount of body content.</div>
    </div>
</div>

I would like for the .body within the .main div to be vertically scrollable, while the .header remains at the top.

I've put together a short example using JSFiddle with the whole .main scrollable.

I have searched and looked for other solutions but they all seem to either involve having a fixed header height (which I do not) or using some horrible table structure (like in this JSFiddle).

Edit: A few other restrictions: the solution needs to support IE9 and be responsive (i.e. .main should work regardless of it's height.)

Improve this question

1 Answer 1

Reset to default
2

Make the parent a flex column, set .body to flex-grow: 1 and overflow-y: scroll

.main {
  width: 500px;
  height: 400px;
  background-color: rgba(255, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.header {
  background-color: rgba(0, 0, 255, 0.1);
  padding: 8px;
}
.header .heading {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.body {
  padding: 8px;
  flex: 1 0 0;
  overflow-y: scroll;
}
<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of content</div>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
      <p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
      <p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
    </div>
</div>

You could also just set a height or max-height on .body, then add overflow-y: scroll and it will scroll.

.main {
  width: 500px;
  background-color: rgba(255, 0, 0, 0.1);
}
.header {
  background-color: rgba(0, 0, 255, 0.1);
  padding: 8px;
}
.header .heading {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.body {
  padding: 8px;
  max-height: 300px;
  overflow-y: scroll;
}
<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of content</div>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
      <p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
      <p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
    </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks for your answer. Unfortunately I forgot to add some restrictions to the question (updated now), that the solution has to support IE9 (so Flex won't work). I also don't know what the size of the .body is going to be, so I can't use height or max-height; I need it to take up the rest of .main.
@DanielGibbs what's wrong with using "some horrible table structure"? It's just CSS, and table display properties would do it. That's a valid approach for IE8+. It also does stuff like vertical-align and equal-height columns well for older browsers. No problem using it IMO. Otherwise I think you'd need to use javascript.
The main reason I'm trying to avoid using a table structure is that it adds 4 more layers of <div>s to the code and just generally makes it more cluttered and harder to read. But it looks like that might be my only option for IE9.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.