可滚动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的高度

回答

相关问题