当打开时，滑出菜单不会在页面中间居中div

Question Background:

问题背景：

I'm using an 'off the shelf' jQuery slide out panel menu within my app.

我在我的应用程序中使用“现成的”jQuery滑出面板菜单。

The Issue

问题

The following screen shot shows the app with the slide menu closed. Note that the text is in a div centered in the middle of the page:

以下屏幕截图显示了关闭幻灯片菜单的应用程序。请注意，文本位于页面中间的div中：

When the menu is opened the positioning is lost and the text is shown at the top of the screen, I want the div to remain in the middle of page when the many is opened:

当菜单打开时，定位丢失，文本显示在屏幕顶部，我希望div在打开多个页面时保留在页面中间：

The Code:

代码：

Please see the following JS Fiddle that shows the issue:

请参阅以下JS Fiddle，其中显示了该问题：

https://jsfiddle.net/svjkv79j/

As stated I am using an of the shelf option for this menu but I have added my own styling for centering the text div, as shown:

如上所述，我使用了这个菜单的架子选项，但我添加了自己的样式来居中文本div，如下所示：

         .centered {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        <div class="centered">
                    <div class="col-lg-8 col-lg-offset-2">
                        <h1 class="page-header">Off-canvas Push Menu For Bootstrap 3</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis sem ut varius commodo. Nunc ultricies diam vel elit hendrerit, at mollis est elementum. </p>

                    </div>
                </div>

What styling is needed within the 'centered' div to stop it losing its style when the menu is opened? Any help would be greatly appreciated.

在'居中'div中需要什么样式来阻止它在菜单打开时失去它的风格？任何帮助将不胜感激。

1 个解决方案

#1

You just need to give the #page-content-wrapper { height: 100%; }

你只需要给#page-content-wrapper {height：100％; }

Fiddle here

在这里小提琴

#1