How can I scroll with a two-paned layout and a header using flexbox?

StackOverflow https://stackoverflow.com/questions/21771913

  •  11-10-2022
  •  | 
  •  

题

I've worked with flexbox casually for a few months now in Chrome 32 and am liking what I see. But now I'm hitting a wall introducing overflow: scroll to my flexbox layout. overflow: scroll requires an explicit height or min-height to know when to start scrolling.

When I make a simple two-paned flexbox layout, I can give each pane a height of 100% of it's parent, which in turn is 100% the height of the window. Therefore, I can make one of the panes scroll when it has too much content, while the other pane doesn't scroll at all. Here's an example:

http://jsfiddle.net/T5NC9/4/

However, once I add a header above these two panes, the two pages get pushed down by the height of the header added. It looks like the following and isn't too ideal:

http://jsfiddle.net/T5NC9/5/

I think I've gotten the hang of how flexbox and window height work together in simple cases. Can flexbox handle this, though? Should I look at the template layout instead?

Note: I have had some success using, say, height: 10vh for the header and 90vh for the pane height. But that feels hacky.

有帮助吗？

解决方案

I think you can just make the <body> a vertical flexbox (display:flex;flex-direction:column), with flex: none on the nav and flex: 1 0px on the .content.

(That way, the nav will get its auto-height, and the content absorbs all of the extra space. No need for 10%/90% divisions.)

Fiddle: http://jsfiddle.net/vr5Yv/

(EDIT: After the min-height:auto feature was reintroduced, you need to clear that on the div with id="content", too, or it ends up too tall. Updated jsfiddle with that additional change: http://jsfiddle.net/vr5Yv/5/ )

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top