絕對位置內相對沒有定義的高度

我想把一個絕對的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

絕對位置內相對沒有定義的高度

回答

相關問題