首页 > 一个垂直居中布局的问题

一个垂直居中布局的问题

最近在学 React.js,用 v2ex 的 api 做了个页面(不过这个问题跟 React.js 无关),不过在布局的地方遇到了个问题,不知道有什么好的解决办法。

先上个 GIF 图:

首先,我的想法是点击展开之后高度是由里面内容决定的,但是不会超过窗口宽度的90%,内容高度超过的时候就显示滚动条,另外,我希望展开之后的框框是水平垂直居中的,后面的内容滚动其始终是在水平垂直居中的位置。

现在我让这个框框是

left 0
top 0
bottom 0
right 0

但是这样子我发现高度不会由里面的内容决定?

另外需要注意的一点是,加入帖子里面是有图片的,一开始图片是没有下载过来的。

关于这些需求有什么好的解决办法吗?


用fixed布局。
内部元素通过padding撑开布局,再设置下max-height的大小,对展开后的框添加css overflow-y: scroll;即可在页面超过高度时显示滚动条。


除了加这些。还需要添加margin 0 auto

或者left50%top50% translateX-50% translateY-50%

【热门文章】
【热门文章】