滾動DIV

我有以下HTML代碼不起作用。滾動DIV

我想使div.content可滾動。由於您無法使用表格單元格修復此問題，因此我爲其添加了一個額外的div，並將其添加到overflow: auto。

完整的CSS是這樣的：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
body { 
    display: table; 
    table-layout: fixed; 
} 
header, nav, .content { 
    display: table-cell; 
    vertical-align: top; 
} 
header { 
    width: 100px; 
    background: red; 
} 
nav { 
    width: 100px; 
    background: blue; 
} 
.content { 
    background: lightgreen; 
} 
.box { 
    background: lightblue; 
    height: 100%; 
    overflow: auto; 
}

還要檢查這個JSFiddle。

此代碼似乎在IE9和Opera12中工作，但不在Firefox26中。

任何人都知道這個問題可能是什麼？

來源

2014-01-16 LinkinTED

給內容一個高度，它會工作 – Huangism

@黃色，nope，[它不]（http://jsfiddle.net/c5ab2/2/）。 – LinkinTED

100％無效，需要定義一個數字。這可能也會幫助你http://stackoverflow.com/questions/17920061/scrollable-div-in-table-cell – Huangism

我有一小片的jQuery代碼固定它：

<script> 
$(window).on("resize", function() { 
    $(".box").height($(window).height()+"px"); 
}).resize(); 
</script>

它給.box在頁面加載恩調整窗口大小的高度。

來源

2014-01-16 21:37:36 LinkinTED

回答

相關問題