Question

我遇到了问题，我不知道如何修复它。我希望两个div有相同的高度。左侧div的高度必须为“auto”，右侧的高度必须相同。右边的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

我尝试在此directive

中重新创建类似的方案

请检查以解决问题。我这样做的假设是，一旦页面加载，左div高度不会改变。如果是，则必须编写更多Javascript来查找更改并调整正确的div高度;

Answer 2

您可以使用CSS表格（display: table）来解决您的问题。

以下是基础知识。我简化了您提供的代码，以便其他人更容易理解。

.table {
  display: table;
  border-collapse: separate;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
  padding: 30px;
}
.content {
  background: #EEE;
  width: 960px;
}
.list {
  background: #BBB;
  width: 316px;
}

<div class="table">
  <div class="row">
    <div class="col content">
      <h1>Episode 01</h1>
      <!-- Your Video goes here -->
      <p><strong>This column has an automatic height. The other column's height will have the same height as this column</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="col list">
      <h2>Andere Episoden:</h2>
      <ul>
        <li><a href="#">Episode 1</a></li>
        <li><a href="#">Episode 2</a></li>
        <li><a href="#">Episode 3</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 3

一种解决方案是在两列周围设置相对定位的包装，并将右列的位置设置为固定。

/* solution */
#wrapper {
  overflow: hidden;
  position: relative;
  max-width: 1040px; 
}

#right {
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
}

#episodenbox1 {
  width: 340px;
  overflow: hidden;
}

#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;
}

/* solution */
#wrapper {
  overflow: hidden;
  position: relative;
  max-width: 1040px; 
}

#right {
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
}

#episodenbox1 {
  width: 340px;
  overflow: hidden;
}

<div id="wrapper">
  <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>
</div>

此解决方案没有响应，但您的原始代码也不是。为了使其响应，您必须添加@media个查询，这样只有在右栏没有覆盖左侧容器时才会应用绝对定位。

Answer 4

不需要javascript，固定高度的表格。您也可以使用弹性框进行操作。

如果你想这样做，你需要将你希望滚动的<div>包裹在一个额外的div中，让它称之为#scroll。相对定位它的父级和绝对位置#scroll。母体不具有高度，因此它将仅在不拉伸包装物/容器的情况下膨胀（即弯曲）到剩余空间。通过将top: 0; bottom: 0;应用于#scroll，您现在拥有所需高度的div，并可以强制其内容滚动。

＆＃13;

#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;
    /* Remove the following line*/
    /* 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;
}

/* The above I copied from your question. I've removed one line and added what follows */	
#wrapper{
	display: flex;
}
#right{
	display: flex;
	flex-direction: column;
}
#untertitelbox{
	flex: 0 0 auto;
}
#episodenbox1{
	flex: 1;
	position: relative;
}
#scroll{
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: auto;
}

＆＃13;

<div id='wrapper'> <!-- Added -->
<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">
                              <div id='scroll'> <!-- Added -->
                                
                                <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> <!-- Added: end of scroll div -->
                            </div>
                        </div>
  </div> <!-- Added: end of wrapper div -->

＆＃13;

获取左div的高度（height：auto）并将其设置为右div（溢出：滚动）

4 个答案: