Html 如何阻止 div 占用空间？

How do I stop a div taking up space?

提问by NibblyPig

I am doing stuff with ajax progress bars and stuff...

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

Basically I have a hidden div that says "Loading" in it, and beneath it I have a visible div with my content in.

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

When it is loading, it fades the content div out, makes the hidden div visible, and moves it via javascript/relative positioning to be in the middle of the content.

加载时，它会淡出内容 div，使隐藏的 div 可见，并通过 javascript/相对定位将其移动到内容的中间。

It looks quite badass but unfortunately when the div is made visible, even though its relatively positioned, it takes up a line so my content moves down.

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

Do you know how I can stop it from taking up space when it is made visible?

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

Edit: Someone removed the tag it seems

编辑：似乎有人删除了标签

The loading div starts off display none, so it takes up no space, and then when it is made visible, it starts taking up space, even though it is positioned relatively.

加载 div 开始时不显示，所以它不占用空间，然后当它可见时，它开始占用空间，即使它是相对定位的。

I could use visible and non-visible, but then it would force my content window down all of the time.

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

It looks like absolute positioning is the way to go.

看起来绝对定位是要走的路。

What I want to do is combine absolute and relative positioning. I am trying to get the absolute coordinates of the content div and setting its location that way, but without success yet.

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

Edit: I just re-read your answer and you have done exactly that. Thank you!

编辑：我刚刚重新阅读了您的答案，您已经完全做到了。谢谢！

回答by Sampson

"Do you know how I can stop it from taking up space when it is made visible?"

“你知道我怎样才能在它可见时阻止它占用空间吗？”

Position it absolutely.

绝对定位。

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>

回答by Rich

When you want to make it invisible, make it really invisible with style="display:none". There are many ways to do this...not sure how you have this set up or how you're altering your dom elements. Provide some more context (doing this with Ajax controls, custom JavaScript, a library like jQuery, etc), and we can give you a more specific solution.

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

回答by enguerran

You have to play with the displayoption, not the visibleoption :

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

Tip: Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space!

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

see w3schools

见w3schools

[EDIT]

[编辑]

After reading w3fools, even if they do not collected any mistake about pr_class_visibility, they do about pr_class_display: so never see w3schools

在阅读了w3fools 之后，即使他们没有收集到任何关于pr_class_visibility 的错误，他们也会做关于pr_class_display 的错误：所以 永远不要看到 w3schools

But you can see reference.sitepoint.com:

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

Descendant boxes of a hidden box will be visible if their visibility is set to visible, whereas descendants of an element for which display is set to none can never generate boxes of their own.

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

回答by ólafur Waage

You can try various things, like. Depends on how your code is constructed. Since you didn't provide an example :)

你可以尝试各种各样的东西，比如。取决于你的代码是如何构建的。由于您没有提供示例:)

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

回答by Dan Baker

I know this has been answered, but if you are using bootstrap try:

我知道这已得到解答，但如果您使用引导程序，请尝试：

class='hide'

instead of

代替

class='hidden'