CSS來製作一個div留在一個div

我有一些HTML像下面的底部..CSS來製作一個div留在一個div

<div id="dynamicheight"></div> 
<div id="one"></div> 
<div id="two"></div> 
<div id="target"></div>

，如果你看到的HTML「dynamicheight」分區將得到高度動態的頁面加載，我想「目標」格留總是在「dynamicheight」 div的底部（按它的高度）

注：還有一些其他的div的作爲之間的HTML

我試圖做下面的CSS所示

#dynamicheight{ 
    position: relative; 
} 
#target{ 
    position: absolute; 
    bottom: 0; 
}

，但它不工作的任何變通PLZ ...........

來源

2013-09-05 user2486535

Duplicate [如何使div粘貼到父div的底部？]（http://stackoverflow.com/questions/5106181/how-to-make-div-stick-to-the-bottom-of-parent -div） – user1477388

如果你與某些ID元素寫CSS，你需要寫#target，不。目標。

來源

2013-09-05 13:16:42 Kazuki

選擇器不正確。你正在申請dynamicheight類。更改.到#

#dynamicheight{ 
    position: relative; 
} 
#target{ 
    position: absolute; 
    bottom: 0; 
}

來源

2013-09-05 13:17:01 Anton

我輸入錯了，實際上我用＃ – user2486535

它在這個小提琴上工作http://jsfiddle.net/zskeH/你的意思是當你向下滾動一個頁面時，你想要跟隨目標？那麼你必須使用'position：fixed' – Anton

1和2 div的浮動div的 – user2486535

喜歡這個

您在HTML id使用或css您已經定義class

所以請改變，如果在cssremoveclass，寫id

DEMO

HTML

<div id="dynamicheight"></div> 
<div id="one"></div> 
<div id="two"></div> 
<div id="target"></div>

CSS

#dynamicheight{ 
    position: relative; 
} 
#target{ 
    position: absolute; 
    bottom: 0; 
}

來源

2013-09-05 13:18:14 falguni

您可以更改標記爲

<div id="dynamicheight" class='dynamicheight'></div> 
<div id="one"></div> 
<div id="two"></div> 
<div id="target" class='target'></div>

或改變CSS是

#dynamicheight{ 
    position: relative; 
} 
#target{ 
    position: absolute; 
    bottom: 0; 
}

來源

2013-09-05 13:19:54 Mohsen

請注意，#dynamicheight和#target元素兄弟姐妹。

他們將在文件正常流程中一個接一個地呈現。

你可能需要操作DOM，來實現這一（不使用absolute定位去除文檔流#target元素）：

jQuery(function($){ 
    $('#target').insertAfter('#dynamicheight'); 
});

JSFiddle Demo #1。

但是，在某些情況下，它可能是更好的移動第二元件插入第一個：

jQuery(function($){ 
    $('#target').appendTo('#dynamicheight'); 
});

在這種情況下，你需要使用position屬性來保持第二元件的底部第一個：

#dynamicheight { 
    position: relative; 
    height: 400px; /* Just as demo */ 
} 

#target { 
    position: absolute; 
    bottom: 0; 
    width: 100%; /* Optional */ 
}

JSFiddle Demo #2。

來源

2013-09-05 13:46:31

CSS來製作一個div留在一個div

回答

相關問題