0

I am trying to create a page that has 6 vertically stacked divs (from top to bottom: A,B,C,D,E,and F). Divs B,C,D, and F all use static pixel sizing for height (only divs A and E are of variable height). Div E's content can be of any length - its height should be between 10% to 40% of the screen height and should scroll if there's too much content. I've hacked at a few solutions, but I'm stuck: https://codepen.io/RiverTaig/pen/zLLEeG Here's the goal:

enter image description here

The CSS for div E seems to do nothing useful. 

#E {
  min-height: 10%;
  max-height: 40%;
}

I'm pretty new to working with Grid for flex sizing in CSS - perhaps that the best way to go for this problem? I tried that approach, but failed.

DevonTaig
  • 693
  • 6
  • 13
  • You are almost good, missing only `html{height:100%;} wrapper {height:100%}` – Temani Afif Aug 05 '18 at 21:55
  • I got this to work using table sizing. I'm not sure if that's a good approach or not for general responsive design, but it works: https://codepen.io/RiverTaig/pen/djjZdm – DevonTaig Aug 05 '18 at 23:15

0 Answers0