出現顯示水平滾動：表元素

CSS：

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.table-wrapper { 
    display: table; 
    width: 1366px; 
    height: 100%; 
} 

.cell-left { 
    display: table-cell; 
    width: 240px; 
} 

.cell-right { 
    display: table-cell; 
    width: 1126px; 
}

HTML：

<div class="table-wrapper"> 
    <div class="cell-left"></div> 
    <div class="cell-right"> 

    /* Some really long content */ 

    </div> 
</div>

當。細胞，右側爲內容變得足夠長，瀏覽器顯示垂直滾動條，它也增加了水平滾動條，這真的毀了我的佈局。如果我在.table-wrapper上放100％的寬度，問題就會消失，但它也縮小了我不想要的兩個單元格。我必須在所有3個元素上都有固定的寬度，以便對項目需要的響應式設計進行適當的調整。同樣，這兩個單元需要跨越文檔高度。

有趣的是Internet Explorer 11沒有這個問題，但Firefox和Chrome都這樣做。我能做些什麼來防止出現水平滾動條？

編輯

我忘了補充一點，我在1366×768的屏幕分辨率測試此。如果你想在你自己的屏幕分辨率上自己測試，只需更改數字即可。

這裏的小提琴：

http://fiddle.jshell.net/zddm6asz/1/show/

這裏是另一個用於1920×1200：

http://fiddle.jshell.net/zddm6asz/2/show/

來源

2014-10-31 Mirko Filipovic

哪個滾動條？ http://jsfiddle.net/zddm6asz/ – DaniP 2014-10-31 13:54:26

嘗試測試它的jsfiddle之外，它並沒有顯示有 – 2014-10-31 14:09:32

**注意**框架網址是http://fiddle.jshell.net/zddm6asz/show/ – BananaAcid 2014-10-31 14:13:31

編輯：看到這個答案在我的第一個評論，嘗試在此之前。

如果添加

overflow-x: hidden;

的.cell-left和.cell-right，那麼這應該防止細胞得到一個水平滾動條。

來源

2014-10-31 13:54:55 Felix

它不工作 – 2014-10-31 13:59:12

我成立了一個小小提琴，只是降低了總寬度一點，所以它可以在屏幕上更適合，如果你要。 [http://jsfiddle.net/zz5rr41L/3/]我能看到的唯一水平滾動條不是來自單元格，它是由身體本身產生的，如果表格不適合你的屏幕。因此，一個單元格的'overflow-x：hidden;'並不能解決這個問題。 – Felix 2014-10-31 14:11:05

它不會將橫條添加到單元格中，它會將其添加到整個頁面，因爲表格本身不會超出屏幕寬度。 – 2014-10-31 14:59:54

我曾與我使用顯示器時的水平滾動條出現了同樣的問題：表細胞;對於某些元素。滾動條應用於整個頁面，但應用溢出：隱藏;到這些細胞的包含元素解決了這個問題。在你的情況下，將應用溢出：隱藏;到.table包裝。

此外，您可能不希望設置一個像素寬度到表的包裝器。如果可能，爲什麼不把它設置爲最大寬度的百分比？尤其如此，你正在嘗試一個響應式設計。

來源

2015-03-29 20:52:35 Kinburn101

出現顯示水平滾動：表元素

回答

相關問題