Question

我将容器DIV设置为“position：fixed”，其中包含另一个设置为绝对位置的div。

有什么方法可以让这个包含div的宽度和高度适合内容，而不是总是100％？

<div class="transparent_background">
    <div id="window">hello.</div>
</div>

这就是我想要的：http://jsfiddle.net/3BYPu/（无需手动设置宽度/高度）。

<div class="transparent_background">
    <div id="window" style="width:30px; height:30px">hello.</div>    
</div>

Answer 1

aur0n，

如果可能，最好和最简单的方法是使用javascript计算元素的高度和宽度，然后相应地定位内部元素。

要实现此目的，您只需获取包含元素的宽度并将其除以2，然后将内部元素的left值设置为该值减去其自身宽度的一半。然后，对高度做同样的事情。

此外，您可能错过的一件事是您的内部div应设置为position: relative和display: inline。你的div伸展以匹配包含元素的宽度的原因是因为position: absolute将元素从正常流中取出，而position: relative将其保留在正常流中。

这是我使用的代码（使用jQuery）：

// centering the width
$("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px");
// centering the height
$("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px");

使用此解决方案，您无需手动设置宽度和高度。此外，拥有一个包含多行文本的内部div也不会有问题。

小提琴：http://jsfiddle.net/ydSqU/3/

Answer 2

你可以尝试以下，

 #window {
  border:2px dotted red;
  background:white;
  width:50%;
  height:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25%;
  vertical-align:center;

}

Answer 3

@ aur0n像这样改变css

#window {
        border:2px dotted red;
        background:white;
        position: absolute;
        clear:both;
    }

根据内容（而非100％）固定宽度和高度的位置

3 个答案: