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

我想把一个绝对的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（position：relative）在.test的顶部和底部包含.test（position：absolute）和space/padding/margin。 div的高度是未知的，因为内容可能占用多于一行，具体取决于屏幕大小

来源

2015-07-13 user3550879

你不是很清楚你想达到什么。 – Doug

有几种替代解决方案可以使用.test {display：inline-block}来实现您的需求吗？或者.test {float：left}并使用clear-hack来防止.top-footer崩溃？ – Doug

围绕子div添加空白是相当平凡的。但是，防止父div崩溃更加棘手，并且是您首先需要解决的问题。你遇到的问题是，在父母相对定位并且孩子绝对定位的情况下，整个页面上实际“知道”儿童的唯一元素是父母 ...并且即使此时它也是相当差的父母因为它甚至不会为孩子提供足够的空间！ DOM的其余部分的行为就好像该元素甚至不存在 - 其他未定位的元素将浮在其上或上方 - 甚至文本也会被您的子div遮挡。假设你想以这种方式使用绝对定位在父div中添加其他内容，仅意味着你将不得不在整个地方使用绝对定位......这可能稍后会对大脑调试布局问题产生一些影响。

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

使用javaascript嗅出了孩子div的高度并应用到父。一个相当简单的工作，如果你使用像jQuery这样的库，但需要额外下载的文件，并且使得你的网站不必要的庞大，如果这是你使用它唯一的任务。这也不能解决孩子div遮挡页面上其他元素的问题。
对孩子使用display:inline-block，重做CSS（并且可能需要进行大量的修改，具体取决于学习方式和样式的复杂程度）...这会阻止父级崩溃但可能会给你额外的布局问题。
将您的CSS（同上）重新修改为float:left子div。然后，您需要使用CSS“clear hack”来防止父divv崩溃，尽管这是一小段CSS，您可以从其他地方剪切并粘贴这些CSS ......这是一项简单的工作。

如果你确定要使用绝对定位这样我的首选解决方案是使用jQuery（选项1）因为我的大部分工作往往仍要使用一定程度的它...它是一个工具，我会很方便，执行这个任务的代码将非常简单。

编辑 - 这里有一个小小的小提琴让你开始。 https://jsfiddle.net/fo8mq1vf/

来源

2015-07-13 12:59:40 Doug

这就是代码的输出结果：https://jsfiddle.net/s3zLa54t/2/。父div（.top-footer）确实包含.test div。你用什么浏览器来查看输出？

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

如果这不是你正在寻找的，请在这里澄清问题。

来源

2015-07-13 01:00:58 Jayant

我的问题是高度变化，我放在那里的高度是显示背景。没有高度它不包含div – user3550879

对不起，应该已经注意到了！将元素定位为'absolute' [将其从正常流程中移除]（https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/），因此div正在被处理的父div之外。如果你想'div.test'包含扩展内容，那么（1）找到一种将孩子定位为亲属的方法，或者（2）使用JS来动态地改变父母的身高，这可能是更好的想法。 – Jayant

回答你的问题很简单删除

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的倍数。您可以检查它是否超出灰色背景。

来源

2015-07-13 02:34:22

我可能需要指定。我需要测试以保持网站其他部分“绝对”正常工作 – user3550879

网站的其他部分是什么？你的意思是工作正确吗？ –

.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; 
}

来源

2015-07-13 13:29:29 user1685883

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

回答

相关问题