Question

我最近尝试了解HTML和CSS时遇到了一些问题。这是ting：我得到了一个HTML页面，它显示了左边列表的~100个div。但是我希望父div包含一个滚动条，但其长度受视口的限制。

问题是，当我打开页面时，全身被拉伸以适合完整列表，这不是我想要的。下面是一张照片，上面有一些样本数据可以告诉你，因为我的英语不是最好的。 “侧边栏”的元素由JavaScript生成，只是里面有文本的div（我不知道，如果段落会更好）

如您所见，滚动条位于右边框上，当我滚动时，滚动整个主体。我宁愿在“列表”中有一个滚动条，只需滚动它而不移动视口。

这是我的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

Answer 1

你应该将div id =“details”包装在另一个div工作中作为包装并使用这个css：

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

为什么不使用表？

如何将身高限制为视口

1 个答案: