可滾動tbody的td內的div。滾動條問題

table > tbody { 
    height: 600px; 
    display: block; 
    overflow: auto; 
} 

table > tbody > tr { 
    width:100%; 
    height: 1440px; 
    display:table; 
    table-layout:fixed; 
}

此css使可滾動'表'或可滾動'tr'。有用。但我的問題是，'tr'裏面'td'內有'div'。當我將'div'的高度設置爲100％或任何高度以使整個'div'不在tbody的可見範圍內時（在此情況下在600像素內），將出現文檔的滾動條。表格的滾動條與「div」相同。可滾動tbody的td內的div。滾動條問題

只要'div'的底部應該位於'tbody'後面，文檔的滾動條就會延長。當我滾動表格時，文檔的滾動條沒有改變。

這裏是我的問題的一個很粗糙的版本：https://jsfiddle.net/hL8hemka/14/

正如你可以看到，有兩個滾動條。如果您看不到兩個，請嘗試在css部分中刪除div { height: 100% }。您會注意到右側（文檔滾動條應該在哪）消失的兩個條中的一個。

如何在文檔上沒有滾動條的情況下使用tr的100％高度來製作div？

來源

2016-07-05 user3290525

爲什麼地球上你想'tr'顯示爲'table'？ ...對我來說，它超越了所有的邏輯 – LGSon

@LGSon你認爲這是什麼原因造成的問題？我真的很難找出你在你的評論中提出的建議...... – user3290525

我還沒有提出解決方案，我只是想知道爲什麼你要設置一個'tr'來顯示爲'table' ...所以你其實不需要那樣做？ ...如果不是的話，我會在上班時發佈一個解決方案 – LGSon

我沒有在你的小提琴中看到兩個滾動條，除非你的意思是有一個水平和垂直滾動條？無論採用哪種方式，如果您想在任何元素上隱藏滾動條，只需將overflow-x或overflow-y（取決於滾動條是垂直還是水平）設置爲隱藏即可。例如，如果我想隱藏垂直滾動條我會設置溢出-X到隱藏在我的CSS像這樣：

body { 
    overflow-x: hidden; 
}

來源

2016-07-05 15:11:18 Cameron637

就禁止滾動：

body 
{ 
    overflow: hidden; 
}

fiddle

來源

2016-07-05 15:12:50 CdSdw

哇。這實際上是有道理的。如果我不需要滾動條，似乎合法，但如果我想要滾動條，但不是「多功能」滾動條，該怎麼辦？ – user3290525

這因爲你已經爲td添加了一個邊框，請刪除它，它適合所有的東西。 x軸上的滾動條隱藏。

td { 
border:none; 
} 

div { 
    border: 1px solid #111; 
    height: 100%; /* Removing this hides the 'document' scrollbar*/ 
}

來源

2016-07-05 15:14:35 frnt

如果表格單元格中沒有任何其他元素，我建議您使用不同的方法。而不是將高度設置爲div，您可以將其定位爲絕對元素。這樣，您可以使用頂部，左側，右側和底部屬性來確定尺寸。

td { 
    position:relative; 
} 

td > div { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
}

來源

2016-07-06 09:13:50 thetont

可滾動tbody的td內的div。滾動條問題

回答

相關問題