可滾動div與側div的高度

我有兩個子div並排在父div中。左邊的div div作爲內容有很長的列表。它應該是可垂直滾動的。右側子div內容將被動態添加/刪除。它的高度不斷變化。可滾動div與側div的高度

所以我想要調整左小孩的身高以適應右小孩的身高。

這是可行的CSS

的Html

<div id='parent'> 
    <div id='left-kid'> 
    Very Long content 
    <hr> 
    Overflow: Scroll 
    </div> 
    <div id='right-kid'> 
    Vertically Growing Content 
    </div> 
</div>

CSS

#left-kid { 
    float: left; 
    overflow: scroll; 
} 
#right-kid { 
    float: left; 
}

來源

2015-12-21 shinoymm

左側應該多長時間？你說它應該是可滾動的，如果是這種情況，它應該有一些初始高度，否則它將只是作爲裏面的內容:) –

@BojanPetkovski這是棘手的一面。這裏沒有特定的高度。正確的孩子最初有一些內容。所以離開的孩子應該有這個高度。或者爲兩個孩子設置一個最小高度也很好。但仍然當內容增長時，存在問題 – shinoymm

我認爲這是不可能的，因爲正確的孩子的身高是動態的，所以用JS取這個高度並在左邊的孩子上指定這個高度：

$("#left-kid").css('height', $("#right-kid").height());

來源

2015-12-21 12:53:06 AnTSaSk

你可以嘗試用顯示器做實驗：表

#parent{ 
    display: table; 
} 
#left-kid, #right-kid { 
    display: table-cell; 
}

這將使高度相等的兩列不論大小增加。

來源

2015-12-21 13:04:55 Piry

但問題是使左側容器將其高度調整到正確的容器，無論它是較大（容易）還是較小（ - >這裏是困難部分）。我想這將是一個JS解決方案。 – Johannes

剛剛在我的沙箱中測試過它，它似乎工作。如果我添加溢出：滾動到左側容器，然後更改正確容器的大小，左側容器隨後出現。 – Piry

是的，但你指定正確的容器的高度？如果我理解正確，他想要正確的容器和左側容器的動態高度 – AnTSaSk

這是可行的CSS

號一樣Bojan Petkovski評論，你需要以某種方式指定一個高度，否則內容將剛剛展開容器。

#parent > div { 
    height: 100%; // or some other height 
}

唯一的其他方式做，這將是使用JavaScript，可每次動態改變像AnTSaSk的回答內容時確定高度。

來源

2015-12-21 13:37:29 Hans

可滾動div與側div的高度

回答

相關問題