Question

我正在使用ajax进度条和东西......

基本上我有一个隐藏的div，里面写着“正在加载”，在它下面我有一个可见的div，里面有我的内容。

当它加载时，它会淡化内容div，使隐藏的div可见，并通过javascript / relative position将其移动到内容的中间。

看起来非常糟糕，但不幸的是，当div显而易见时，即使它相对定位，它也会占用一条线，所以我的内容会向下移动。

你知道如何让它在可见时占用空间吗？

编辑：有人删除了标签

加载div开始显示无，因此它不占用空间，然后当它可见时，它开始占用空间，即使它相对定位。

我可以使用可见和不可见，但它会一直强制我的内容窗口。

看起来绝对定位是最佳选择。

我想要做的是结合绝对和相对定位。我试图获取内容div的绝对坐标并以这种方式设置其位置，但尚未成功。

编辑：我只是重新阅读你的答案，你已经做到了。谢谢！

Answer 1

“你知道如何让它在可见时占用空间吗？”

绝对定位。

div#theParent {
  position:relative;
  height:200px;
  width:640px;
  top:50px;
  left:50px;
}
div#theChild {
  position:absolute;
  height:100px;
  width:400px; 
  top:50px;
  left:120px;
}

<div id="theParent">
  <div id="theChild">
    <p>This div is absolutely positioned to a relatively-positioned parent.</p>
  </div>
</div>

Answer 2

当你想让它不可见时，用style="display:none"使它真的不可见。有很多方法可以做到这一点...不确定你如何设置这个或者你如何改变你的dom元素。提供更多上下文（使用Ajax控件，自定义JavaScript，jQuery等库），我们可以为您提供更具体的解决方案。

Answer 3

您必须使用显示选项，而不是可见选项：

提示：即使是不可见的元素占用页面上的空间。使用“display”属性创建不占用空间的不可见元素！

请参阅w3schools

<强> [编辑]

在阅读w3fools之后，即使他们没有收集有关pr_class_visibility的任何错误，他们也会对pr_class_display这样做：所以 never see w3schools

但你可以看到reference.sitepoint.com：

如果隐藏框的可见性设置为可见，则隐藏框的后代框将可见，而显示设置为无的元素的后代永远不会生成自己的框。

Answer 4

你可以尝试各种各样的事情，比如。取决于您的代码的构造方式。由于您没有提供示例：）

display: none;
height:0px 
line-height: 0px;
font-size: 0px;

Answer 5

我知道这是一个旧线程，但是现在我们拥有position:sticky;并希望与之配合使用，一种实现方法是设置height:0; overflow:visible;

Answer 6

我知道这已经得到了解答，但如果您使用的是bootstrap，请尝试：

class='hide'

而不是

class='hidden'

如何阻止div占用空间？

6 个答案: