我正在製作一個包含視頻和播放列表的網頁。我創建像這樣「溢出：滾動」不適用於「display：table-cell」

正如你可以看到播放列表已經溢出，雖然我已經給兩個相同的尺寸不與視頻內嵌和它工作時的視頻在數播放列表小於4.此滾動不起作用。

這裏是我的代碼：

#video_player { 
 
\t display: table; 
 
\t line-height: 0; 
 
\t font-size: 0; 
 
\t background-image: url('recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg'); 
 
} 
 
#video_player video, 
 
#video_player figcaption { 
 
\t display: table-cell; 
 
\t vertical-align: top; 
 
} 
 
#video_player figcaption { 
 
\t width: 20%; 
 
\t height: 100px; 
 
} 
 
#video_player figcaption a { 
 
\t display: block; 
 
\t opacity: .5; 
 
\t transition: 1s opacity; 
 
} 
 
    
 
#video_player figcaption a img, 
 
figure video { 
 
\t width: 100%; 
 
} 
 
#video_player figcaption a:hover { 
 
\t opacity: 1; 
 
} 
 
@media (max-width: 1000px) { 
 
\t #video_player video, 
 
\t #video_player figcaption { 
 
\t \t display: table-row; 
 
\t } 
 
\t #video_player figcaption a { 
 
\t \t display: inline-block; 
 
\t \t width: 33.33%; 
 
\t } 
 
}

<figure id="video_player"> 
 
\t <video controls poster="83da1111cd7046afa5ddc90e31888d8d.jpg" autoplay="" id="video1" muted> 
 
\t \t <source src="video0.mp4" type="video/mp4" id="kl"> 
 
\t \t <source src="video0.webm" type="video/webm"> 
 
\t </video> 
 
\t <figcaption style="max-height:216px ;overflow:scroll" > 
 
\t \t <a id="q" href="video0.mp4"><img src="hqdefault (3).jpg" id="b4" alt="Nambia Timelapse 1" style="height: 72px;"></a> 
 
\t \t <a href="video1.mp4" id="q1"><img src="hqdefault (2).jpg" id="b5" alt="Nambia Timelapse 1" style="height: 72px;"></a> 
 
\t \t <a href="video3.mp4" id="q2"><img src="hqdefault.jpg" id="b6" alt="Nambia Timelapse 2" style="height: 72px;"></a> 
 
\t \t <a href="video3.mp4" id="q3"><img src="hqdefault (1).jpg" id="b7" alt="Nambia Timelapse 3" style="height: 72px;"></a> 
 
\t </figcaption> 
 
</figure>

overflow:'scroll'不工作。此外，溢出不適用於Firefox。我想要爲水平和垂直滾動工作。請幫忙。

來源

2017-03-25 aeshna

你只有4個視頻在這裏，他們都是可見的，所以不需要滾動。現在，如果你給高度少，那麼這4個視頻總要「無形」或你的「身材」，它需要滾動。 – divy3993

@ divy3993但我想讓它在高度大於216px時滾動，並且由於第四個視頻而發生了這種情況 – aeshna

嘗試給''video_player figcaption'提供'height：216px;'並讓我知道它是否有幫助，通過替換'100px;' – divy3993

我認爲你需要在你的figcaption裏面加上div，然後把max-height: 216px;和overflow-y: scroll;加到它的CSS中。

來源

2017-03-25 20:41:05 TuomasK

謝謝，它工作。 – aeshna

是的一回事！ @aeshna你可以接受這個答案。 – divy3993

我想你想要的是在一定的固定高度後滾動table-cell。如果我找到了你正確的解決辦法：

你想爲你的固定高度#video_player figcaption，但因爲它是display類型table-cell。給定高度是not possible。您可以在table-cell中添加一個element，該號碼固定爲height:216px。

更新：

的table或table-row將具有取決於table-cell的含量最小高度不考慮固定的高度（如果給予table-cell）。

因此，如果您將固定高度設置爲table-cell，則無關緊要，因爲table-row/table已經是單元的實際內容高度。然後table-cell需要全高。

「A‘高度’用於‘錶行’‘自動’的值是指用於佈局的行高是MIN。MIN取決於單元格框的高度和電池箱對準（很像的計算一個線框高度）「。

更多Table height algorithms

檢查了這一點：

.tab { 
 
    display: table; 
 
    width:100%; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
.cell_2 { 
 
    width: 20%; 
 
} 
 
.cell_2 .inner_cell { 
 
    height: 216px; 
 
    overflow:auto; 
 
} 
 
.cell_2 img { 
 
    display: block; 
 
    opacity: .5; 
 
    transition: 1s opacity; 
 
    max-width: 100%; 
 
}

<div class="tab"> 
 
    <div class="cell cell_1"> 
 
    <iframe width="460" height="215" src="https://www.youtube.com/embed/rMNS9oNCL3s" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    <div class="cell cell_2"> 
 
    <div class="inner_cell"> 
 
     <img src="http://placehold.it/150x150" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
     <img src="http://placehold.it/150x150" /> 
 
    </div> 
 
    </div> 
 
</div>

我希望這可以幫助你！

來源

2017-03-25 20:47:29 divy3993

「溢出：滾動」不適用於「display：table-cell」

回答

更新：

相關問題