绝对居中的div没有正确溢出

时间：2021-01-29 01:27:31

Take a look a this sample HTML (a dumbed-down version of my project):

看看这个示例HTML(我的项目的一个愚蠢的版本):

<!DOCTYPE html>
<html>
    <head>
        <style>
            .pagewrapper {
                width: 960px;
                height: 768px;
                margin: auto;
                border: 1px solid green;
                border-radius: 3px 3px 3px 3px;
                box-shadow: 2px 2px 2px 2px rgb(0, 153, 51);
            }
            .pagewrapperImg {
                background: url("http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg");
                background-size: 100% 100%;
            }
            </style>
    </head>
    <body style="overflow: scroll;">
        <div style="right: 0px; bottom: 0px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;">
            <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                <div class="pagewrapper pagewrapperImg" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                </div>
            </div>
        </div>
    </body>
</html>

This is suppose to produce a centered div with a background image. When the window is resized, it should overflow with scrollbars. This works fine on Firefox, but on IE and chrome, it clips the top of the div, as shown in the image.

这假设产生具有背景图像的居中div。调整窗口大小时,它应该使用滚动条溢出。这在Firefox上工作正常,但在IE和Chrome上,它会剪切div的顶部,如图所示。

绝对居中的div没有正确溢出

Why is this happening, and how can I fix this?

为什么会发生这种情况,我该如何解决这个问题呢?

EDIT: Let me point out that in the full project, there are UI elements in this div, and they get clipped too (it's not just the image)

编辑:让我指出在整个项目中,这个div中有UI元素,它们也会被剪裁(它不仅仅是图像)

1 个解决方案

#1

1  

in .pagewrapperImg add

在.pagewrapperImg中添加

background-position:center center;

and please please please....dont use inline styles!!

请请....请不要使用内联样式!!

fiddle demo

#1

1  

in .pagewrapperImg add

在.pagewrapperImg中添加

background-position:center center;

and please please please....dont use inline styles!!

请请....请不要使用内联样式!!

fiddle demo

标签：

相关文章