如何限制身高到視口

我最近嘗試瞭解HTML和CSS時遇到了一些問題。這是丁：我給自己一個HTML頁面，顯示左邊列表的100個div。不過，我希望父div包含一個滾動條，但其長度被視口限制。如何限制身高到視口

問題是，當我打開頁面時，整個身體被拉伸以適合不是，我想要的完整列表。下面是一張圖片，上面有一些示例數據可以向你展示，因爲我的英語不是最好的。對於「邊欄」中的元素由JavaScript獲取生成並只是用文字的div內（不`噸我知道，如果段落會更好）

Snapshot from browser window

正如你所看到的，滾動條上的右邊框，當我滾動整個身體滾動。我寧願在「列表」中有一個滾動條，只需在不移動視口的情況下滾動該滾動條即可。

這裏是我的CSS：

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
html, body { 
    height: 100vh; 
} 
body { 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
} 

/*-------------------- 
* Header 
*------------------*/ 

header { 
    display: flex; 
    align-items: center; 
    height: 60px; 
    background-color: #4d4d4d; 
} 
header h1{ 
    flex: 1; 
    color: white; 
    font-size: 24px; 
    font-family: Tahoma; 
} 
header ul { 
    display: flex; 
    flex: 1; 
    list-style-type: none; 
    height: 100%; 
    margin: 0; 
} 
header li { 
    flex: 1; 
    color: white; 
    text-align: center; 
    font-family: Tahoma; 
    font-size: 20px; 
    padding-top: 30%; 
} 
header li:hover { 
    background-color: #333333; 
} 
header img { 
    background-color: none; 
    height: 20px; 
    width: 20px; 
} 

/*-------------------- 
* Main area 
*------------------*/ 

main { 
    flex: 1; 
    display: flex; 
    margin: 1%; 
} 

/*-------------------- 
* Sidebar 
*------------------*/ 

#sidebar { 
    display: flex; 
    flex: 1; 
    overflow: auto; 
} 
#sidebar div { 
    flex: 1; 
    text-align: center; 
} 
#sidebar .th{ 
    text-transform: capitalize; 
} 

/*-------------------- 
* Details 
*------------------*/ 

#details { 
    flex: 4; 
    margin-left: inherit; 
}

這裏是我的index.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <header> 
      <ul> 
       <li id="btnPerson">Persons</li> 
       <li id="btnCompany">Companies</li> 
       <li id="btnSave">Save</li> 
       <li id="btnLoad">Load</li> 
       <li id="inpChoose">Choose file</li> 
       <li id="btnSearch"></li> 
      </ul> 
     </header> 
     <main> 
      <div id="sidebar"></div> 
      <div id="details"></div> 
     </main> 
     <script src="src/main.js"></script> 
     <script src="src/ui.js"></script> 
     <script src="src/init.js"></script> 
    </body> 
</html>

下面是一些代碼來重現我的問題：

var sidebar = document.getElementById("sidebar"); 
var table = document.createElement("div"); 
table.className = "table"; 
sidebar.appendChild(table); 

for (var i = 0; i < 50; i++) { 
    var e = document.createElement("div"); 
    e.innerHTML = "blabla"; 
    table.appendChild(e); 
}

我希望有聰明的人可以幫我這個

乾杯 Mirodin

來源

2016-11-08 Mirodin

請提供[** Minimal，Complete和Verifiable示例**]（http://stackoverflow.com/help/mcve），最好在[**代碼片段**]（https：// stackoverflow .blog/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）。您當前的代碼不會提供與圖像相同的結果。 – Ricky

我跳過了示例數據，因爲這只是一個名稱數組，我的JS循環並作爲div附加到「側邊欄」。 – Mirodin

我在底部添加了一個代碼示例，它重現了我所做的大致構想。 – Mirodin

你應該換你DIV ID = 「範圍」內的另一個DIV工作作爲包裝和使用CSS：

.wrapper{ 
overflow:scroll; 
height:100px;}

爲什麼不使用表？

來源

2016-11-08 17:17:03 Asim

您的示例類型的作品，但我在不同的屏幕尺寸上使用它，並希望id =「sidebar」與視圖端口一樣高。將它限制在一個固定的高度是我的第一個方法，但我不喜歡結果。我的目標是讓「主」標籤擴展到全視角端口。 – Mirodin

你有一些叫做CSS視口單元（vw和vh）。例如：寬度：90vw;這會給你90％的視口寬度。 – Asim

謝謝，這是理想的提示。當我將主標籤設置爲80％，並刪除flex：1屬性時，所有東西都會落入到位。 – Mirodin

如何限制身高到視口

回答

相關問題