獲取左div的高度（高度：自動）並將其設置為右div（溢出：滾動）

Question

我有問題，我不知道如何解決。 我想要兩個div具有相同的高度。 左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

我試圖在這個小提琴中重新創建一個類似的場景

請檢查是否可以解決問題。 我這樣做的前提是，一旦加載頁面，左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，高度固定的表格。 您也可以使用flex-boxes。

如果您想以這種方式進行操作，則需要將想要滾動的<div>包裝在一個額外的div中，我們將其#scroll 。 相對定位其父級，絕對定位#scroll 。 父級不會有高度，因此它只會擴展（即彎曲）到剩余空間，而無需拉伸包裝紙/容器。 通過應用top: 0; bottom: 0; top: 0; bottom: 0; 若要#scroll您現在具有所需高度的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; /* 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; } 

 <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 -->