0
私は最近、HTMLとCSSについて学ぶことに少し問題があります。 ここにはティンがあります：私は、左側にリストを表す約100のdivを示すHTMLページを手に入れました。しかし、親divにスクロールバーが含まれていて、その長さがビューポートによって制限されるようにしたい。ボディーの高さをビューポートに制限する方法
問題は、私がページを開くと、全身が、私が望むものではない完全なリストに合うように伸びていることです。以下は私の英語が最善ではないため、あなたに見せるためのサンプルデータの写真です。 「サイドバー」のJavaScriptによって生成されますとすぐ内側のテキストでのdivている（段落が良いでしょう場合、私は、知っている `tを）
あなたが見ることができるように、スクロールバーが上であるための要素右の境界線とスクロールすると全身がスクロールします。私はむしろ "リスト"内のスクロールバーを持ち、ビューポートを動かさずにスクロールするだけです。ここで
は私の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
[**最小、完全、および検証可能な例**]（http://stackoverflow.com/help/mcve）、[**コードスニペット**]（https：// stackoverflow .blog/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）を使用してください。あなたの現在のコードはあなたのイメージと同じ結果を提供しません。 – Ricky
サンプルデータはスキップされています。これは名前の配列なので、私のJSはループし、 "サイドバー"にdivとして追加されます。 – Mirodin
私が行ったことの大まかなアイデアを再現するコード例を下部に追加しました。 – Mirodin