如何限制身高到视口

我最近尝试了解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

如何限制身高到视口

回答

相关问题