jquery - 内容加载后如何全方位展开div?

标签 jquery css

我有一个弹出式 div position:fixed。最初我想显示加载图像,直到未加载内容。

我用过

 this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop()  + "px");

this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft()  + "px"); 

根据屏幕居中 div。它工作正常。

加载内容后出现问题,由于内容范围从简单的文本段落到复杂的表格,它们向右下方向扩展。由于我的 div 是根据那个小的“正在加载”图像居中的,现在有了新内容,它更靠近右侧和底部。

有什么方法可以在所有 4 个方向上扩展 div。

最佳答案

首先,让我们修复您的 div 居中。对于固定的 div,请考虑以下事项:

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.center
            {
                position: relative;
                width: 400px;
                height: 400px;
                margin: 0px auto;
                background-color: red;
            }

            div.fix
            {
                position: fixed;
                width: 100%;
                margin: 100px auto;
            }
        </style>
    </head>
    <body>
        <div class="fix"><div class="center"></div></div>
    </body>
</html>

这将使您的 div 动态居中,无论它的大小如何或如何变化(高度和宽度)。它也非常不 hacky(我赞成)。尝试将这种 CSS 应用到您的问题中,它应该可以很好地调整大小。

关于jquery - 内容加载后如何全方位展开div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11308856/

相关文章:

css - 无法在 Heroku 上加载自定义 CSS

javascript - 为什么这个变量在 JQuery 中不能正确传递

javascript - WebOS 3.0 Enyo 按钮 Onclick 事件

javascript - 控制台日志 : Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' : The canvas has been tainted by cross-origin data

javascript - 如何判断图片是否超链接?

css - Bootstrap - 更改可见性时复选框组的布局间距中断

jQuery - 从多个下拉列表中淡出 DIV

css - LESS:如何将一个 mixin 作为参数传递给另一个 mixin?

javascript - 垂直对齐 DIV 框中的文本和图像

css - 样式跨度元素跟随另一个跨度,中间没有文本内容