CSS的網頁，充滿屏幕，具有內

我想打一個網頁，填滿整個可用browserwindow長長的名單。這不是問題。但在該頁面上我想顯示一個長列表。具有該列表的元素應該有一個滾動條來滾動列表。使用我現在的html，頁面被推送列表拉伸。這是我的網頁：CSS的網頁，充滿屏幕，具有內

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
</head> 
<body style="height: 100%; margin:0; background-color: #FFFF00"> 
<header> 
    <H1>Header of page with long list of items</H1> 
</header> 
<section style="position: absolute; top: 80px; bottom: 5px; width:100%; background-color: red"> 
    <div style="background-color: #BBBBBB"> 
     <div style="overflow-y: auto;"> 
      <ol> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
      </ol> 
     </div> 
    </div> 
</section> 
</body> 
</html>

來源

2015-11-20 Java observer

只需添加一個'height' - 之後的內容將scrolla在那之後，也是 - 爲什麼在使用外部樣式表時使用內聯樣式？ – SidOfc

預計您至少會嘗試爲自己編寫代碼。堆棧溢出不是代碼寫入服務。我建議你做一些額外的研究，無論是通過谷歌或通過搜索，做一個嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

顯示的代碼只是爲了顯示問題。不需要在單獨的文件中具有樣式。 –

試試這個https://jsfiddle.net/2Lzo9vfc/133/

CSS

body { 
     height: 100vh; 
     background-color: #FFFF00; 
     overflow-y: hidden; 
    } 

    .list { 
     height: 100vh; 
    } 

    .list ol { 
     overflow-y: scroll; 
     height: 100%; 
    }

HTML

<header> 
    <H1>Header of page with long list of items</H1> 
</header> 
<section style="position: absolute; top: 80px; bottom: 5px; width:100%; background-color: red"> 
    <div style="background-color: #BBBBBB"> 
     <div class="list"> 
      <ol> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
       <li><h3>Item in the list</h3></li> 
      </ol> 
     </div> 
    </div> 
</section>

來源

2015-11-20 12:45:09

謝謝Nenad。我不得不減少.list的高度。 ol到90％以查看最後一個項目，但之後它就起作用了。我錯過了高度單位'vh'。 –

不客氣。請不要忘記標記接受的答案，這對解決問題最有幫助。 –

CSS的網頁，充滿屏幕，具有內

回答

相關問題