0

I'm trying to get a layout to work without any JS, just HTML and CSS.

top-div
left-div      center-div      right-div

The idea is to have vertical scroll bars on the center div, but nowhere else on the page, including the body.

It seemed like the best idea would be a vertical flexbox, to make the top row and bottom row, then a horizontal flexbox, to make left, center, and right.

How hard could that be?

Well, if you look at this fiddle, it's clearly too hard for me to make sense:

https://jsfiddle.net/gL4pwkxu/1/

The document always wants to stretch past the height of the window. Why?

MikeHelland
  • 1,151
  • 1
  • 7
  • 17

3 Answers3

1

Tricky to get working. From this SO post: Scrolling a flexbox with overflowing content, There's a need to add an element that creates its own height from the content. But I had to set the full-page height to 100vh (View Height units) AND set the height of content to anything and then it worked. See below...

CSS

html, body {
  margin: 0px;
  padding: 0px;
}

full-page {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background-color: green;
}

content {
  flex: 1;
  display: flex;
  position: relative;
  height: 1px; // hackery
}

nav {
  background-color: red;
}

#right-column {
  background-color: blue;
}

#main-column {
  flex: 1;
  overflow-y: auto; // used 'auto' so it only appears if you need it
}

#main-column > div {
  min-height: min-content; // magic
}

HTML

<html>
  <body>
  <full-page>  
    <header>top</header>
    <content>
      <nav>left</nav>
      <div id="main-column">
        <div>
          center<br>
          b<br>
          v<br>
          d<br>
          e<br>
          e<br>
          f<br>
          f<br>
          d<br>
          e<br>
          e<br>
          f<br>
          d<br>
          e<br>
          e<br>
          f<br>
          f<br>
          f<br>
        </div>
      </div>
      <div id="right-column">right</div>
    </content>
  </full-page>
  </body>
</html>
Brent Stees
  • 342
  • 1
  • 5
  • Wow, thanks. I felt like with flexbox and grid, it should be amazingly simple and I was just thick. That still could be true. Thanks again. 1px makes all the diff – MikeHelland Dec 15 '19 at 10:11
0

I think the problem is that you are ignoring the height of the <header>top</header> element I also changed the height units to viewport height instead of %. Take a look: https://jsfiddle.net/zL6y7x2j/

hope it helps

Pablo Cardozo
  • 103
  • 1
  • 10
  • Thanks for the answer, but I'd like the the header to be a specific height, not a percentage. I thought flex box would make it easy for the top row to be a specific height, and the bottom row to fill the rest of the screen, but no more. – MikeHelland Dec 15 '19 at 01:17
0

To hide the window scroll add:

body {
overflow: hidden;
}

Then, to make the div scrollable:

#main-column {
  overflow-y: scroll;
  position: static;
}
WebMarie
  • 176
  • 2
  • 10
  • True, I can hide the body's scroll bar, but the since the center column still adds height to the document, things in the right column are now cut off: https://jsfiddle.net/deLkzhc1/ – MikeHelland Dec 15 '19 at 01:14