如何获得作为弹性项的div上的滚动条?我有以下设置:
<div class="main">
<div class="search-bar">
<input type="text"></input>
</div>
<div class="search-results">
<table>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
</table>
</div>
</div>
使用CSS:
.main-info {
width: 650px;
height: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main {
display: flex;
flex-direction: column;
}
.search-bar {
flex : 1;
}
.search-results {
flex: 1;
overflow-y: auto;
}
当表格项目不适合页面时,整个页面都会显示滚动条。但是我想要的是search-results
div可垂直滚动,而search-bar
保持固定在页面顶部。我注意到,如果我为max-height
指定一个search-results
并给它一个较小的值,如100px,那么div将获得滚动条,但是如何在不指定此最小高度的情况下得到它呢?
JSFiddle:https://jsfiddle.net/gw7f8shy/
您应在CSS中使用max-height属性
<div class="main">
<div class="search-bar">
<input type="text"></input>
</div>
<div class="search-results">
<table>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
</table>
</div>
</div>
此处的CSS代码:
.main-info {
width: 650px;
height: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main {
display: flex;
flex-direction: column;
}
.search-bar {
flex : 1;
}
.search-results {
flex: 1;
overflow-y: auto;
max-height: 400px;
}
我希望这是您的期望。
更改这些CSS属性。
.search-bar {
flex: 1;
position: sticky; /* or u can use position:fixed */
top: 0;
z-index: 9;
}
.main-info {
width: 650px;
height: inherit;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.main-info {
height: calc(100vh - 30px);
}
.main {
display: flex;
flex-direction: column;
}
.search-bar {
flex: 1;
position: sticky;
/* or u can use position:fixed */
top: 0;
z-index: 9;
}
.search-results {
flex: 1;
max-height: calc(100vh - 30px);
overflow-y: auto;
}
<html>
<head>
<title>Subway-Mobile</title>
</head>
<body>
<div class="main">
<div class="search-bar">
<input type="text" />
</div>
<div class="search-results">
<table>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
<tr>
<td>
<div class="main-info">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>