javascript - 获取左边div的高度(height : auto) and set it to the right div (overflow: scroll)

Question

我有一个问题，我不知道如何解决。我想让两个 div 的高度相同。左侧 div 的高度必须为“自动”，右侧必须具有相同的高度。右边的 div 里面有 14 个 div，它们必须是可滚动的。

这是我的代码:

#episodenbox {
    margin-top: 62px;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

#titelbox {
    width: 960px;
    height: 50px;
    background-color: #ffffff;
}

#titelbox p {
    margin-left: 6px;
    color: #000000;
    font-size: 30px;
    text-align: left;
    text-decoration: none;
    line-height: 50px;
}

#thumbnail {
    background-color: #ffffff;
    float: left;
    margin-top: 12px;
    width: 632px;
    height: auto;
}

#thumbnail p {
    width: 616px;
    color: #000000;
    font-size: 19px;
    margin: 0px 6px 6px 6px;
    text-align: left;
    text-decoration: none;
}

#episodenimg {
    width: 620px;
    height: 349px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#untertitelbox {
    margin-left: 12px;
    margin-top: 12px;
    background-color: #ffffff;
    float: left;
    width: 316px;
    height: 40px;
}

#untertitelbox p {
    margin-left: 6px;
    color: #000000;
    font-size: 19px;
    text-align: left;
    text-decoration: none;
    line-height: 5px;
}

#episodenbox1 {
    margin-left: 12px;
    float: left;
    width: 316px;
    overflow: scroll;
}

#episode1 {
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode1 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode1 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode2 {
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode2 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode2 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode3 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode3 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode3 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode4 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode4 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode4 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode5 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode5 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode5 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode6 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode6 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode6 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode7 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode7 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode7 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode8 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode8 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode8 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode9 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode9 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode9 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode10 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode10 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode10 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode11 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode11 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode11 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode12 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode12 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode12 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode13 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode13 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode13 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode14 {
    margin-top: 3px;
    float: left;
    background-color: #ffffff;
    width: 316px;
    height: 68px;
}

#episode14 img {
    width: 100px;
    height: 56px;
    display: block;
    margin: 6px 6px 6px 6px;
}

#episode14 p {
    margin-left: 112px;
    margin-top: -62px;
    color: #000000;
}

#episode1:hover {
    background-color: #E0E0E0;
}

#episode2:hover {
    background-color: #E0E0E0;
}

#episode3:hover {
    background-color: #E0E0E0;
}

#episode4:hover {
    background-color: #E0E0E0;
}

#episode5:hover {
    background-color: #E0E0E0;
}

#episode6:hover {
    background-color: #E0E0E0;
}

#episode7:hover {
    background-color: #E0E0E0;
}

#episode8:hover {
    background-color: #E0E0E0;
}

#episode9:hover {
    background-color: #E0E0E0;
}

#episode10:hover {
    background-color: #E0E0E0;
}

#episode11:hover {
    background-color: #E0E0E0;
}

#episode12:hover {
    background-color: #E0E0E0;
}

#episode13:hover {
    background-color: #E0E0E0;
}

#episode14:hover {
    background-color: #E0E0E0;
}

                        <div id="left">
                            <div id="titelbox">
                                <p>Episode 01: Begegnung</p>
                            </div>
                            <div id="thumbnail">
                                <img id="episodenimg" src="Episode%2001.png">
                                <p>Aus einem unterirdischen Forschungslabor bricht ein Mutant in Gestalt eines jungen M&auml;dchens aus und t&ouml;tet dabei 23 Sicherheitsleute. Die beiden Teenager Yuka und Kohta treffen am Strand auf den Mutanten, der durch den Streifschuss am Kopf aber offenbar sein Ged&auml;chtnis verloren hat.</p>
                            </div>
                        </div>
                        <div id="right">
                        <div id="untertitelbox">
                            <p>Andere Episoden:</p>
                        </div>
                            <div id="episodenbox1">
                                <a href="Episode%2002.html"><div id="episode2">
                                    <img src="Episode%2002.png">
                                    <p>Episode 02: Vernichtung</p>
                                </div></a>
                                <a href="Episode%2003.html"><div id="episode3">
                                    <img src="Episode%2003.png">
                                    <p>Episode 03: Im Innersten</p>
                                </div></a>
                                <a href="Episode%2004.html"><div id="episode4">
                                    <img src="Episode%2004.png">
                                    <p>Episode 04: Aufeinandertreffen</p>
                                </div></a>
                                <a href="Episode%2005.html"><div id="episode5">
                                    <img src="Episode%2005.png">
                                    <p>Episode 05: Empfang</p>
                                </div></a>
                                <a href="Episode%2006.html"><div id="episode6">
                                    <img src="Episode%2006.png">
                                    <p>Episode 06: Herzensw&auml;rme</p>
                                </div></a>
                                <a href="Episode%2007.html"><div id="episode7">
                                    <img src="Episode%2007.png">
                                    <p>Episode 07: Zuf&auml;llige Begegnung</p>
                                </div></a>
                                <a href="Episode%2008.html"><div id="episode8">
                                    <img src="Episode%2008.png">
                                    <p>Episode 08: Beginn</p>
                                </div></a>
                                <a href="Episode%2009.html"><div id="episode9">
                                    <img src="Episode%2009.png">
                                    <p>Episode 09: Sch&ouml;ne Erinnerung</p>
                                </div></a>
                                <a href="Episode%2010.html"><div id="episode10">
                                    <img src="Episode%2010.png">
                                    <p>Episode 10: S&auml;ugling</p>
                                </div></a>
                                <a href="Episode%2010,5.html"><div id="episode11">
                                    <img src="Episode%2010,5.png">
                                    <p>Episode 10,5: Regenschauer</p>
                                </div></a>
                                <a href="Episode%2011.html"><div id="episode12">
                                    <img src="Episode%2011.png">
                                    <p>Episode 11: Vermischung</p>
                                </div></a>
                                <a href="Episode%2012.html"><div id="episode13">
                                    <img src="Episode%2012.png">
                                    <p>Episode 12: Taumeln</p>
                                </div></a>
                                <a href="Episode%2013.html"><div id="episode14">
                                    <img src="Episode%2013.png">
                                    <p>Episode 13: Erleuchtung</p>
                                </div></a>
                            </div>
                        </div>

Answer 1

我试图在这个 fiddle 中重新创建一个类似的场景

请检查这是否解决了问题。我这样做的前提是一旦页面加载完毕，左边的 div 高度就不会改变。如果是这样，您必须编写更多的 Javascript 来查找更改并调整正确的 div 高度；