滾動該div，而不是整個頁面

我看過類似的問題，但沒有一個說得那麼簡單，因爲我想在這裏做。滾動該div，而不是整個頁面

使用CSS，我想將一個頁面分成三個部分：一個左窗格（將具有導航鏈接），一個標題欄和一個帶滾動條的內容窗格。我事先不知道窗戶的大小，所以我想盡可能地使用比例尺寸（例如「15％」）。

我遇到麻煩的一點是給內容窗格一個滾動條來顯示其溢出（如果有的話）。我希望能夠自動滾動該div，而無需移動頁面的頁眉或左側導航部分。

我已經看到這種事情在Javascript的幫助下完成並調整事件處理程序的大小，但是我發現很難相信它不能用簡單的CSS完成......？

我到目前爲止可以在this jfiddle上看到。正如您所看到的，內容窗格中的溢出將爲整個頁面觸發一個scollbar，而不是像我想的那樣單獨打開內容窗格。任何意見，如何解決這個問題，特別是單獨使用CSS，將不勝感激。謝謝！

粘貼代碼打擊，萬一得到jsfiddle是一個問題。該HTML：

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 

<body> 
<div class="layout-wrapper"> 
    <div class="left-pane"></div> 
    <div class="right-pane"> 
     <div class="right-pane-header"></div> 
     <div class="right-pane-content"> 
      <h4>Lo, a list:</h4> 
      <ol> 
       <li>A list item.</li> 
       <li>A list item.</li> 
       <li>A list item.</li> 
       <!-- etc etc --> 
      </ol> 
     </div> <!-- right-pane-content --> 
    </div> <!-- right-pane --> 
</div> <!-- layout-wrapper --> 

</body> 
</html>

而這裏的CSS：

html { 
    width: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

body { 
    width: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background-image: url("http://hd-wall-papers.com/images/wallpapers/hd-website-backgrounds/hd-website-backgrounds-20.jpg"); 
    /*overflow-y: hidden;*/ 
} 

.layout-wrapper { 
    display: table; 
    width: 100%; 
    min-height: 100%; 
    background-image: inherit; 
} 

.left-pane { 
    display: table-cell; 
    width: 15%; 
    min-height: 100%; 
    background-color: #ffe0b0; 
} 

.right-pane { 
    display: table-cell; 
    width: 85%; 
    height: 100%; 
    min-height: 100%; 
    background-image: inherit; 
} 

.right-pane-header { 
    display: block; 
    height: 100px; 
    width: 100%; 
    background-color: #ffb0b0; 
} 

.right-pane-content { 
    display: block; 
    width: 100%; 
    background-image: inherit; 
    overflow-y: auto; 
}

再次感謝！

來源

2017-03-15 Greg Howard

一套高度其中U希望它到B滾動股利..和身體上隱藏的溢出 – Manjunath

但我不知道高度 - 我希望它成爲標題欄下面的「剩下的東西」。這取決於用戶如何設置窗口大小。 –

使用JavaScript爲那個動態設置 – Manjunath

也許我不明白的問題，但如果你只是想有滾動，你可以把它佔據HTML長度的100％

.right-pane-content { 
display: block; 
width: 100%; 
height: 100%; 
background-image: inherit; 
overflow-y: auto;}

來源

2017-03-15 17:31:23 Enavar

滾動該div，而不是整個頁面

回答

相關問題