使2個div與父母具有相同的高度

我創建了具有divs的2個列的佈局，但是列的高度是不同的。我想要一個div將被擴展爲另一個高度。使2個div與父母具有相同的高度

這個鏈接是我的演示http://jsbin.com/UjiyufO/2

請請給我任何建議。

來源

2013-10-29 Khoi Nguyen

這裏http://stackoverflow.com/請參閱我的回答a/19630045/1542290 –

Thanks @ Mr.Alien，但是我的div必須顯示：block'由於個人原因，不能應用table和table-cell。 –

在你的演示中，我如何在div頂部的第一列創建'hello'，在第二個欄目中'hello'是margin-top 10px –

如果添加此Javascript將工作

$(document).ready(function(){ 
    var myheight= $('#header').height(); 
    var thatheight= $('#content').height(); 
    if(myheight>thatheight) 
    { 
     $('#content').css('height',myheight) 
    } 
    else 
    { 
     $('#header').css('height',thatheight) 
    } 
});

入住這JSbin

來源

2013-10-29 07:13:34

感謝@Deekey的解決方案，但div不會平滑呈現。你有什麼建議嗎？ –

-1

設置您的2個div的高度相同。示例：

#main div{ 
    height: 500px; 
}

在您的演示中，有一個標記<div>，其中id = main有2個div。那裏只需設置2個相同高度的div。

來源

2013-10-29 06:40:04 david

感謝@david，我的頁面中的內容只是爲了演示，內容可能比長度要高，並且高度必須可擴展作爲孩子，另一個div也像另一個div一樣擴展（和父div一樣） –

確保父元素#main具有完全的高度，或者2個div的100％高度無法工作。

您也可以使用此：

#main{ overflow:hidden; } 
#header,#content{   
    width: 40%; 
    display: block; 
    border: 1px solid; 
    float: left; 
    margin-bottom:-1000px; 
    padding-bottom:1000px; 
}

來源

2013-10-29 06:53:16 lxrmido

使2個div與父母具有相同的高度

回答

相關問題