相对于具有最大高度的兄弟姐妹布置元素：100％

Question

我正在建造一个灯箱，其中包含一篇文章和一些相对于文章定位的导航按钮（见图）。文章可以是可变长度/高度，但不大于父级 - 内容应滚动overflow:auto。

我尝试使用max-height:100%来构建它，但正如此问题中提到的那样 - Child with max-height: 100% overflows parent，如果父元素没有明确的高度设置，max-height会解析为none，因此overflow:auto不会触发。但是，在父级上设置高度意味着按钮不再相对于动态文章高度定位。

您可以在此处查看此演示：https://jsbin.com/hepivelele/edit?html,css,js,output

单击“使用JS运行”，然后单击演示中的任意位置以向文章添加更多内容，使其比页面长。给#wrap height:100%显示了上面提到的相反问题。

这个问题有解决方法吗？

Answer 1

您可以将max-height: 90vh;添加到article元素。比它开始工作而没有任何其他标记或样式的更改。

检查修改后的示例：https://jsbin.com/kofepotiji/edit?css,output

目前的浏览器支持相当不错：http://caniuse.com/#search=vw

唯一的缺点是，在非常小的高度#lightbox的填充变得大于10vh。这可以通过将填充从px更改为vw和vh来修复，但如果视口的高度小于600-700px，则会出现这种情况。