1

I am building a lightbox which contains an article and some nav buttons which are positioned relative to the article (see pic). The article can be a variable length/height, but no bigger than the parent - the content should scroll with overflow:auto.

enter image description here

I've tried to build this using max-height:100%, but as mentioned in this question- Child with max-height: 100% overflows parent , if the parent element doesn't have an explicit height set, max-height resolves to none, so overflow:auto doesn't trigger. However, setting a height on the parent means the buttons are no longer positioned relative to the dynamic article height.

You can see a demo of this here: https://jsbin.com/hepivelele/edit?html,css,js,output

Click 'run with JS' then click anywhere in the demo to add more content to the article so it's longer than the page. Giving #wrap height:100% shows the opposite problem mentioned above.

Is there a solution to this problem?

Community
  • 1
  • 1
MachineElf
  • 1,231
  • 2
  • 15
  • 28
  • This might give you an idea although I haven't solved the problem: https://jsbin.com/modozuxona/1/edit?html,css,js,output – fnune Jan 20 '16 at 14:25
  • If I correctly understand what you want, you may add `max-height: 90vh;` to `article`. – Sergiy T. Jan 20 '16 at 14:40
  • Could you provide the full code you have? – somethinghere Jan 20 '16 at 14:43
  • @FaustoNA thanks but im not sure what your plan is? – MachineElf Jan 20 '16 at 23:50
  • @somethinghere full code is in the jsbin demo linked in the question – MachineElf Jan 20 '16 at 23:53
  • I am sorry I most honestly don't remember what I was trying to do hah. I think I was trying to make a new div in order to transfer the conflicting attributes like overflow for them not to affect your buttons. I really gotta go to sleep now though :) – fnune Jan 20 '16 at 23:56
  • 1
    Perhaps I do not understand what you want, but just adding `max-height: 90vh;` to `article` element (and no other changes, see https://jsbin.com/kofepotiji/edit?css,output) makes it work like my understanding of what you are trying to achieve: buttons are in the right positions and `overflow:auto` works like expected. The only drawback - is that on really small heights padding of `#lightbox` becomes bigger than 10vh. – Sergiy T. Jan 21 '16 at 10:25
  • @SergiyT. wow, that works great :-D do you want to post that as an answer, i'll accept it – MachineElf Jan 21 '16 at 13:25

1 Answers1

1

You may add max-height: 90vh; to article element. Than it starts working without any other changes to markup or style.

Check modified example: https://jsbin.com/kofepotiji/edit?css,output

Current browser support is rather good: http://caniuse.com/#search=vw

The only drawback is that on really small heights padding of #lightbox becomes bigger than 10vh. This may be fixed by changing padding from px to vw and vh, but it occurs if height of viewport is less than 600-700px.

Sergiy T.
  • 1,433
  • 1
  • 23
  • 25