如何在不知道父母的div高度的情況下在另一個div的底部放置div

我有一些問題可以解決這種情況。如何在不知道父母的div高度的情況下在另一個div的底部放置div

我有一個沒有設置高度的div「header」，因爲根據瀏覽器可能有一個變量值。在她內部我有兩個更多的div，我想放置一個div在另一個底部，但我永遠不會知道高度「標題」高度。我試圖爲div「標題」定義高度，但有時會失敗。

2014-01-24 Tiago Mourão

您使用女性divs？ *錯誤＃1 * –

'position：absolute'？ – davidpauljunior

只是使用clear:both在底部的第二個div，並設置標題的高度作爲height:auto

樣品：

<div id="header"> 
    <div id="first"> 
     first 
    </div> 

    <div id="second"> 
    second 
    </div> 
</div>

CSS：

#header{height:auto} 
#first{} 
#second{clear:both}

DEMO

來源

2014-01-24 01:52:33

嘗試給你的標題div一個高度，看看你的孩子div最終結束。 – j08691

@ j08691：我有一個小的更新，刪除了浮動：左，...但我沒有發現你的情況有任何問題，現在檢查我的演示 –

這裏是你的代碼與頭高度：http：// jsfiddle。 net/j08691/X9XjQ/2/ – j08691

使用position:absolute與在母體的定位上下文中，例如組合：

<header> 
    Ohai 
    <div> 
     Noes! 
    </div> 
</header>

CSS：

header { 
    position:relative; 
    height:25%; 
    background:#eee; 
} 
div { 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left:-50px; 
    width:100px; 
    background:red; 
}

的標頭的大小是未知的，因爲它是基於視口的高度，並在div被鎖定到其底部結合了position:absolute和bottom:0。標題需要position:relative來指定它絕對定位的子元素使用的定位上下文。

Fiddle here。要做到這一點

來源

2014-01-24 01:54:23

的一種方法是設置position:relative的頭DIV和position:absolute和bottom:0你想坐在頭的底部DIV孩子。

jsFiddle example

來源

2014-01-24 01:54:38 j08691

-1

<div> 
    <div> 
     div1 
    </div> 
    <div> 
     div2 
    </div> 
</div>

來源

2014-01-24 01:54:40 kirk

<div id="header"> 

      <h2>Some title..</h2> 


      <div class="right">   
       <p style="color: black;display: inline"> 
        Some data..... 
       </p>     
      </div> 


      <div class="left">    
       <form action="#" > 
        <input type="text" placeholder="put here..." required="required"> 
        <button type="submit">Validar</button> 
       </form> 
      </div> 


     </div>

CSS：

#header{position: relative;height: 150px; border:1px solid black} 
.right{right: 0; bottom: 0; top:auto; position: absolute} 
.left {left: 0; bottom: 0; top:auto; position: absolute}

這項工作只是在Chrome和Firefox罰款，但沒有在IE工作。有左css的div沒有放在「標題」的底部。

來源

2014-01-24 12:07:35

如何在不知道父母的div高度的情況下在另一個div的底部放置div

回答

相關問題