jquery 带滚动条的垂直居中全屏div

gstyhher 于 2022-12-26 发布在 jQuery

关注(0)|答案(2)|浏览(126)

我想使全屏，垂直居中div覆盖下面的所有内容。

/* css */
#box {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* It is <body> tag class */
.overlay-hidden {
    overflow: hidden;
}

<!-- html -->
<body class="overlay-hidden">
    <div id="box">
        <!-- #box popup content goes here -->
    </div>
    <div class="container">
        <!-- content goes here -->
    </div>
</body>

下面是我的代码：https://jsfiddle.net/uzy78s69/看起来工作得很好，但是当我向#box添加更多内容时，它就不能很好地工作了https://jsfiddle.net/uzy78s69/1/
单击X或Create new post检查行为。
我做错了什么？我该怎么补救？

jquery

来源：https://stackoverflow.com/questions/41322690/vertical-centred-fullscreen-div-with-scroll-bar

2条答案

按热度按时间

6yjfywim1#

只要加上

#box > .container {
  max-height: 100%;
}

JS小提琴：jsfiddle.net/uzy78s69/3

赞(0）回复(0）举报 2022-12-26

nfs0ujit2#

只需从#box类中删除display:flex;。
Example

赞(0）回复(0）举报 2022-12-26

我来回答

jquery 带滚动条的垂直居中全屏div

2条答案

相关问题

热门标签

最新问答