我无法使列表适合父div（定义为100vh）。该列表使div溢出。尝试使用flex和grid失败。我不想使用固定大小的像素，因为页面必须使用浏览器窗口调整大小。
以下代码笔显示问题。感谢您的帮助
https://codepen.io/iamkky/pen/ExavYer
<html>
<head>
</head>
<body>
<div id="main">
<div id="title">title<div>
<div id="list">
<ul>
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
<li>name 5</li>
<li>name 6</li>
<li>name 7</li>
<li>name 8</li>
<li>name 9</li>
<li>name 10</li>
<li>name 11</li>
<li>name 12</li>
<li>name 13</li>
<li>name 14</li>
<li>name 15</li>
<li>name 16</li>
<li>name 17</li>
<li>name 18</li>
<li>name 19</li>
<li>name 20</li>
<li>name 21</li>
</ul>
</div>
<div>
</body>
</html>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
div {
border: 1px solid #5050ff;
}
body {
font-size: xxx-large;
}
#main{
height: 100vh;
}
#list {
}
ul {
}
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class="clear"></div>
</div>
css
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/.clear {
clear: both;
}
我在ul中添加了一些规则，例如：
ul {
overflow-y: scroll;
height: calc(100vh - 4rem);
}
<html>
<head>
</head>
<body>
<div id="main">
<div id="title">title<div> /* The lack of a slash */
<div id="list">
<ul>
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
<li>name 5</li>
<li>name 6</li>
<li>name 7</li>
<li>name 8</li>
<li>name 9</li>
<li>name 10</li>
<li>name 11</li>
<li>name 12</li>
<li>name 13</li>
<li>name 14</li>
<li>name 15</li>
<li>name 16</li>
<li>name 17</li>
<li>name 18</li>
<li>name 19</li>
<li>name 20</li>
<li>name 21</li>
</ul>
</div> /* The lack of a slash */
<div>
</body>
</html>
#main{
height: calc(100vh - 2px);/* The border is 2 pixels and needs to be subtracted */
overflow: auto;
}
我使用flexbox为您创建了一个演示。希望能对您有所帮助！
*{
box-sizing:border-box;
}
html, body {
margin: 0;
padding: 0;
}
div {
border: 1px solid #5050ff;
}
body {
font-size: xxx-large;
}
#main{
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
#list {
overflow: auto;
}
ul {
} <div id="main">
<div id="title">title</div>
<div id="list">
<ul>
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
<li>name 5</li>
<li>name 6</li>
<li>name 7</li>
<li>name 8</li>
<li>name 9</li>
<li>name 10</li>
<li>name 11</li>
<li>name 12</li>
<li>name 13</li>
<li>name 14</li>
<li>name 15</li>
<li>name 16</li>
<li>name 17</li>
<li>name 18</li>
<li>name 19</li>
<li>name 20</li>
<li>name 21</li>
</ul>
</div>
</div>