我有一个屏幕，其中有一个标题，一些内容区域和一个表格。我希望在文本区域穿过标题并滚动时修复屏幕。我在我的plunker中提到的内容应该是固定的，只有表格，其中内容将被隐藏，直到他再次向下滚动到那个高度，所以整个页面现在可以滚动。
我经常探索，但我无法实现我的目标。
CSS：
body {
height: 100%;
width: 100%;
min-height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
答案 0 :(得分：0)
我认为这就是你要找的东西：
.container {
overflow-y: auto;
}
.scrollableContent {
overflow-y: auto;
max-height: 250px;
}<div class="container">
<div class="fixedContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar. Aliquam erat volutpat. Etiam imperdiet tortor at augue dignissim vehicula. Praesent sit amet nulla efficitur,
viverra arcu non, laoreet mauris. Maecenas eleifend tempus ligula accumsan venenatis. Morbi fermentum lectus at dictum commodo. Nullam commodo in nibh at dapibus. Maecenas sit amet nulla eget massa ultricies porttitor. Aenean blandit lacus a pellentesque
blandit. Phasellus sit amet nisl id risus lobortis imperdiet convallis a augue. Proin nec lectus vel dui ultrices lacinia. In pretium justo nunc, at sodales augue dictum nec. Morbi quis libero molestie odio viverra porta. Integer varius elit sed
tempor mollis. Curabitur finibus volutpat dictum. </p>
<div style="height:150px;background-color:yelow">
<h2>This needs to be fixed and below table region should be scrollable</h2>
</div>
</div>
<div class="scrollableContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas elit a ante varius lacinia. Vivamus posuere pellentesque pulvinar.</p>
</div>
</div>
答案 1 :(得分：0)
/* Styles go here */
html {
margin: 0;
padding: 0;
height: 100%;
}
.header {
height: 60px;
border-bottom: 1px solid black;
position: fixed;
width: 100%;
z-index: 100;
background: white;
}
.content {
position: absolute;
top: 60px;
height: 500px;
}
body {
height: 100vh;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
.table-responsive
{
height:100vh;
overflow:auto;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="header">Head</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
tempor mollis. Curabitur finibus volutpat dictum. </p>
<div class="fixed" style="height:50px;background-color:yelow">
<h2>This needs to be fixed and below table region should be scrollable</h2>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
[HEADER]
</th>
<th>
[HEADER]
</th>
<th>
[HEADER]
</th>
<th>
[HEADER]
</th>
<th>
[HEADER]
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
<tr>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
<td>
[CONTENT]
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>body {
height: 100vh;
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
.table-responsive
{
height:100vh;
overflow:auto;
}
尝试使用隐藏溢出提供正文修复视图端口高度，并使用溢出
提供内部div视图端口高度TextureLoader答案 2 :(得分：0)
查看我的解决方案
public void stopScan() {
if (Build.VERSION.SDK_INT < 21) {
Log.i(TAG, "Stopping BLE scan (SDK < 21)");
if(bluetoothAdapter != null) bluetoothAdapter.stopLeScan(this);
} else {
Log.i(TAG, "Stopping BLE scan (SDK >= 21)");
if(mLEScanner!= null) mLEScanner.stopScan(mScanCallback);
}
runnerRunning = false;
thread = null;
}