css - 如何防止 div 与 position:relative 分配额外的空间

Question

这是jsfiddle示例

这是代码..

 <div id="xxx1"> 
     <div class="xxx1">
            txt
    </div> </div>

和 CSS

#xxx1{
    border:1px solid black;
    min-height:25px;

}
.xxx1{
    border:1px solid green;
    height:50px;
    position:relative;
    top:-50px;
}

我想从 div id "xxx1" 中删除多余的空间。怎么做？而且我不能使用固定高度，因为如果我想在该 div 中添加更多数据，我希望该 div 增加它的高度。

这是jsfiddle示例

Answer 1

如果我理解了这个问题，请摆脱padding.body

jsFiddle

body {
    margin:0;
}

您可能还会发现将和box-sizing:border-box集成到和borderpaddingwidthheight

jsFiddle

#xxx1{
    box-sizing: border-box;
}
.xxx1{
    box-sizing: border-box;
}

编辑

RE: 不.. 我想删除 div id "xxx1" 中的空格。

好吧，您可以通过多种方式做到这一点，正确的方式取决于上下文。这里有一对：

• 使用 .xxx1 定位，position:absolute以便将其从页面流中取出。jsFiddle

• height:0px在向其添加内容时使用 JavaScript设置和设置。

Answer 2

在这里尝试像这样改变它

.xxx1{
border:1px solid green;
height:auto;
position:relative;

}

Answer 3

您无法删除相对定位添加的间距。 在身体上设置填充和边距不会这样做。设置 box-sizing 不会这样做。将字体大小设置为 0 不会这样做。用 javascript 做一些事情是愚蠢的。

您有以下选择：

1. 使下一项具有负边距（ick）。
2. 浮动项目，这不会允许重叠（如果你需要的话）
3. 将外部 div 设置为相对位置，将要移动的项目设置为绝对位置（并设置顶部（或底部）和左侧（或右侧）值。这会根据其外部 div 定位要移动的项目（不是窗户）。

3 号几乎总是最好的方法。考虑一下页面将如何随着内容的变化而变化，以确保您选择了正确的选项（以及正确的位置）。

如果您设置为相对位置的外部 div 未在空间中调整（使用顶部/底部/左侧/右侧），则该 div 没有任何多余的多余空间。如果需要调整外层div和内层div，将所有移动的div设置为absolute，最近的parent设置为relative；移动（上/下/右/左）将基于该相对父级。