相对内部的绝对位置，没有定义的高度

Question

我正在尝试将绝对 div 放入相对定位的 div 中。但我不想为相对 div 定义高度。

相对 div 具有背景颜色，当我没有定义高度时，绝对 div 会“超出”相对 div。 我无法控制文本的行数，因此 div 的高度会发生变化

HTML

<div class="row top-footer">
    <div class="top-footer-text text-center">
        <div class="test">
        <h1>title</h1>

        <div class="footer-btn-wrap">
          <div class="footer-btn"><a href="...">button</a></div>

          <div class="footer-btn"><a href="...">button</a></div>
        </div>
        </div>      
    </div>
</div><!-- /top-footer -->

CSS

.top-footer {
position: relative;
background-color: #686a6f;
width: 100%;
padding-top: 40px; margin: 0;
}

.test { 
position: absolute; 
top: 0px; margin: 0;
}

编辑

我希望 .top-footer（位置：相对）包含 .test（位置：绝对），并在 .test 的顶部和底部带有空格/填充/边距。 div 的高度未知，因为内容可能会根据屏幕大小占用多于一行

Answer 1

在子 div 周围添加空格相当简单。然而，防止父 div 崩溃更加棘手，这是您需要首先解决的问题。您遇到的问题是，在父级相对定位和子级绝对定位的情况下，整个页面上唯一真正“知道”子级在哪里的元素是父级......即使这样这是一个相当糟糕的父母，因为它甚至不会为孩子腾出足够的空间！ DOM 的其余部分将表现得好像该元素甚至不存在一样 - 其他未定位的元素将漂浮在它之上或之上 - 甚至文本也会被您的子 div 遮挡。假设您想以这种方式使用绝对定位将其他内容放入父 div 仅意味着您将不得不在整个位置使用绝对定位......这可能会在稍后的大脑调试布局问题上变得有点沉重.

我能想到的唯一可能的解决方案是：

1. 使用 javascript 来检测子 div 的高度并将其应用于父级。如果您使用像 jQuery 这样的库，但需要额外下载的文件，并且如果这是您使用它的唯一任务，这会使您的网站不必要地庞大，这是一项相当简单的工作。这也不能解决子 div 遮挡页面上其他元素的问题。

2. 重做您的 CSS（可能需要大量重做，具体取决于您的程度和样式的复杂性）以在子级上使用 display:inline-block...这将阻止父级折叠，但可能会给您带来额外的布局问题。

3. 将您的 CSS（同上）重新修改为 float:left 子 div。然后，您需要使用 CSS “clear hack”来防止父 divv 崩溃，尽管这是一小部分 CSS，您可以从其他地方剪切和粘贴……这很容易。

   李>

如果您决定像这样使用绝对定位，我首选的解决方案是使用 jQuery（选项 1），因为无论如何我的大部分工作都倾向于使用它...执行此任务的代码非常简单。

编辑 - 这里有一个小技巧可以帮助您入门。 https://jsfiddle.net/fo8mq1vf/

Answer 2

您的代码输出如下所示：https://jsfiddle.net/s3zLa54t/2/。父 div (.top-footer) 确实包含 .test div。您使用什么浏览器查看输出？

至于填充，我猜你看不到更改padding-top 的任何效果。尝试删除 .test div 中的 top: 0px 属性。

如果这不是您想要的，请在此处澄清问题。

Answer 3

你的问题的答案就是删除

position:absolute from your absolute div (.test)
position:relative from your relative div (.top-footer)
height:300px from your relative div (.top-footer)

这是 https://jsfiddle.net/s3zLa54t/3/ 的测试版本，在您的主 div 下有多个 div。您可以检查它是否超出了灰色背景。

Answer 4

.top-footer {
    position: absolute;
    background-color: #686a6f;
    width: 100%;
    padding:0px;
    margin: 0;
}
.test h1{ 
    padding-left:20px;
    position: relative; 
    top: 5px; margin: 0;
    float:left;
    color:#FFF;
}
.footer-btn,.footer-btn-wrap
{
    padding-left:200px;
    color:#FFF;
}
.footer-btn a{
    padding:5px 10px;
    float:left;
    color:#ffffff;
    text-transform:capitalize;
    text-decoration:none;
}