如何将滚动条设置为div部分内的div容器？

时间：2017-05-25 13:19:07

标签： javascript jquery html css html5

我忘了提到这个页面在iframe里面。这是我的iframe的代码：

<iframe src="pgHome.html" name="hmFrame" id="hmFrame" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>

如果我设置滚动=＆＃34;是＆＃34;我的整个框架都会滚动但我仍然无法在我的div容器上滚动。

我在div容器上设置滚动条时遇到一些问题。此容器从导航栏加载每个项目的表。有些表格不适合屏幕。我想在div容器或表上设置滚动条。这是我的HTML表格：

＆＃13;
＆＃13; 
$('.xNavigation a').on('click', function() {
	  	var id = $(this).prop('id');
	  	$('#dataContainer > div[id=' + id + ']').show();
	  	$('#dataContainer > div:not([id=' + id + '])').hide();
	});
＆＃13; 
div.container {
	width: 100%;
	height: 100%;
	font-family: Arial;
	font-size: 12px;
}
aside.sidebar {
    width: 120px;
	margin: 0;
	padding-top: 0;
	float: left;
	background-color: white;
}
aside.sidebar h3 {
	margin: 0;
	background-color: #000099;
	color: white;
	text-align: left;
	padding: 2px;
}
section.mainBox{
	min-width: 1000px;
	margin-left: 5px;
	padding-top: 0;
	float: left;
	background-color: white;
	overflow-y: scroll;
	height: 800px;
}
section.mainBox h3 {
	margin: 0px;
	background-color: #000099;
	color: white;
	text-align: left;
	padding: 2px;
}

div #dataContainer > div:not([id="tbl1"]) {
  	display: none;
}
nav.yNavigation {
	margin: 0;
	background-color: #c8e2db;
}
nav.yNavigation ul {
	list-style: none;
	margin: 0;
	padding-left: 5px;
}
nav.yNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}
nav.yNavigation a:hover {
	color: #999999;
}
nav.xNavigation {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 2px;
	margin-bottom: 5px;
	background-color: #c8e2db;
	float: left;
	border-bottom: 2px solid black;
	min-height: 18px;
}
nav.xNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
}
nav.xNavigation a:hover {
	color: #999999;
}
div.frRow {
	margin: 5px;
	display: table;
}
div.frCell {
	display: table-cell;
	padding: 5px;
}
table.tblData {
	border: #ccc 1px solid;
	margin: 10px;
	border-radius:3px;
}
table.tblData caption {
	font-weight: bold;
	margin-bottom: 2px;
	background-color: #ededed;
	border: #ccc 1px solid;
	border-radius: 3px;
	padding:5px 10px 5px 10px;
}
table.tblData th {
	padding:5px 10px 5px 10px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;
	background: #ededed;
	text-align: center;
}
table.tblData td {
	padding:5px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background-color: #c8e2db;
	min-width: 30px;
	text-align: left;	
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<title>Home Page</title>
</head>
<body>
	<div class="container">
		<aside class="sidebar">
			<h3>Menu</h3>
			<nav class="yNavigation">
				<ul>
					<li><a href="pgHome.html">Home</a></li>
					<li><a href="pgReports.html">Reports</a></li>
				</ul>
			</nav>
		</aside>
		<section class="mainBox">
			<h3>Home Page</h3>
			<nav class="xNavigation">
				<a href="#" id="tbl1">Table 1</a> |
				<a href="#" id="tbl2">Table 2</a> |
				<a href="#" id="tbl3">Table 3</a> |
			</nav>
			<form name="searchForm" id="searchForm" action="pgHome.html" method="POST">
				<div class="frRow">
					<div class="frCell">
						<select name="myMenu" id="myMenu" style="width:80px;">
							<option value="1">Name</option>
							<option value="2">DOB</option>
							<option value="3">ID</option>
						</select>
					</div>
					<div class="frCell">
						<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." />
					</div>
					<div class="frCell">
						<input type="button" name="searchBtn" id="searchBtn" value="Search" />
					</div>
				</div>
			</form>
			<div id="dataContainer">

				<!--- Table 1 --->
				<div id="tbl1">
					<table class="tblData">
						<caption>User Info 1</caption>
						<tr>
							<th>Last Name</th>
							<td colspan="2" id="st_lname"></td>
							<th>First Name</th>
							<td colspan="2" id="st_fname"></td>
						</tr>
						<tr>
							<th>DOB</th>
							<td colspan="2" id="st_dob"></td>
							<th>Age</th>
							<td colspan="2" id="st_age"></td>
						</tr>
					</table>
				</div>

				<!--- Table 2 --->
				<div id="tbl2">
					<table class="tblData">
						<caption>User Info 2</caption>
						<tr>
							<th>Last Name</th>
							<td id="fi_adult1LName"></td>
						</tr>
						<tr>
							<th>First Name</th>
							<td id="fi_adult1FName"></td>
						</tr>
						<tr>	
							<th>Email</th>
							<td id="fi_email"></td>
						</tr>
						<tr>
							<th>Phone Number H</th>
							<td id="fi_adult1PhoneH"></td>
						</tr>
						<tr>
							<th>Phone Number W</th>
							<td id="fi_adult1PhoneW"></td>
						</tr>
						<tr>
							<th>Phone Number C</th>
							<td id="fi_adult1PhoneC"></td>
						</tr>
						<tr>
							<th rowspan="2">Adrress</th>
							<td id="fi_adult1AddrLine1"></td>
						</tr>
						<tr>
							<td id="fi_adult1AddrLine2"></td>
						</tr>
						<tr>
							<th>City</th>
							<td id="fi_adult1City"></td>
						</tr>
						<tr>
							<th>State</th>
							<td id="fi_adult1State"></td>
						</tr>
						<tr>
							<th>Zip</th>
							<td id="fi_adult1Zip"></td>
						</tr>
					</table>	
					<table class="tblData">
						<caption>User Info 3</caption>
						<tr>
							<th>Last Name</th>
							<td id="fi_adult2LName"></td>
						</tr>
						<tr>
							<th>First Name</th>
							<td id="fi_adult2FName"></td>
						</tr>
						<tr>
							<th>Email</th>
							<td id="fi_email2"></td>
						</tr>
						<tr>
							<th>Phone Number H</th>
							<td id="fi_adult2PhoneH"></td>
						</tr>
							<th>Phone Number W</th>
							<td id="fi_adult2PhoneW"></td>
						</tr>
						<tr>
							<th>Phone Number C</th>
							<td id="fi_adult2PhoneC"></td>
						</tr>
						<tr>
							<th rowspan="2">Adrress</th>
							<td id="fi_adult2AddrLine1"></td>
						</tr>
						<tr>	
							<td id="fi_adult2AddrLine2"></td>
						</tr>
						<tr>
							<th>City</th>
							<td id="fi_adult2City"></td>
						</tr>
						<tr>
							<th>State</th>
							<td id="fi_adult2State"></td>
						</tr>
						<tr>
							<th>Zip</th>
							<td id="fi_adult2Zip"></td>
						</tr>
					</table>
				</div>

				<!--- Table 3 --->
				<div id="tbl3">
					<table class="tblData">
						<tr><th>Some Data</th></tr>
					</table>
				</div>
			</div>
		</section>
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

所以我的第一个问题是放置滚动条的最佳位置在哪里？另外我想让我的侧杆和顶杆静止。如果用户滚动页面，那么这两个应该保持在顶部可见。此外，在具有小屏幕尺寸的平板电脑和移动设备上，这将需要一些滚动。有没有更好的方法来处理CSS / HTML 5 / JQuery的这个问题？

4 个答案:

答案 0 :(得分：4)

在overflow: scroll

上试试#dataContainer

答案 1 :(得分：2)

您必须在 .dataContainer 上设置高度，而不是 .mainBox 

div #dataContainer{
  height:200px;
  overflow-y:scroll;
}

和

 section.mainBox{
    min-width: 1000px;
    margin-left: 5px;
    padding-top: 0;
    float: left;
    background-color: white;
    overflow-y: scroll;  //remove this
    height: 800px;  //remove this
 }

＆＃13;
＆＃13; 
$('.xNavigation a').on('click', function() {
	  	var id = $(this).prop('id');
	  	$('#dataContainer > div[id=' + id + ']').show();
	  	$('#dataContainer > div:not([id=' + id + '])').hide();
	});
＆＃13; 
div.container {
	width: 100%;
	height: 100%;
	font-family: Arial;
	font-size: 12px;
}
aside.sidebar {
    width: 120px;
	margin: 0;
	padding-top: 0;
	float: left;
	background-color: white;
}
aside.sidebar h3 {
	margin: 0;
	background-color: #000099;
	color: white;
	text-align: left;
	padding: 2px;
}
section.mainBox{    //Modified
	min-width: 100%;
	margin-left: 5px;
	padding-top: 0;
	float: left;
	background-color: white;

}
#dataContainer{   //Added
	height:200px;
    overflow-y: scroll;

}
section.mainBox h3 {
	margin: 0px;
	background-color: #000099;
	color: white;
	text-align: left;
	padding: 2px;
}

div #dataContainer > div:not([id="tbl1"]) {
  	display: none;
}
nav.yNavigation {
	margin: 0;
	background-color: #c8e2db;
}
nav.yNavigation ul {
	list-style: none;
	margin: 0;
	padding-left: 5px;
}
nav.yNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
}
nav.yNavigation a:hover {
	color: #999999;
}
nav.xNavigation {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 2px;
	margin-bottom: 5px;
	background-color: #c8e2db;
	float: left;
	border-bottom: 2px solid black;
	min-height: 18px;
}
nav.xNavigation a {
	color: black;
	text-decoration: none;
	cursor: pointer;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
}
nav.xNavigation a:hover {
	color: #999999;
}
div.frRow {
	margin: 5px;
	display: table;
}
div.frCell {
	display: table-cell;
	padding: 5px;
}
table.tblData {
	border: #ccc 1px solid;
	margin: 10px;
	border-radius:3px;
}
table.tblData caption {
	font-weight: bold;
	margin-bottom: 2px;
	background-color: #ededed;
	border: #ccc 1px solid;
	border-radius: 3px;
	padding:5px 10px 5px 10px;
}
table.tblData th {
	padding:5px 10px 5px 10px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;
	background: #ededed;
	text-align: center;
}
table.tblData td {
	padding:5px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background-color: #c8e2db;
	min-width: 30px;
	text-align: left;	
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<title>Home Page</title>
</head>
<body>
	<div class="container">
		<aside class="sidebar">
			<h3>Menu</h3>
			<nav class="yNavigation">
				<ul>
					<li><a href="pgHome.html">Home</a></li>
					<li><a href="pgReports.html">Reports</a></li>
				</ul>
			</nav>
		</aside>
		<section class="mainBox">
			<h3>Home Page</h3>
			<nav class="xNavigation">
				<a href="#" id="tbl1">Table 1</a> |
				<a href="#" id="tbl2">Table 2</a> |
				<a href="#" id="tbl3">Table 3</a> |
			</nav>
			<form name="searchForm" id="searchForm" action="pgHome.html" method="POST">
				<div class="frRow">
					<div class="frCell">
						<select name="myMenu" id="myMenu" style="width:80px;">
							<option value="1">Name</option>
							<option value="2">DOB</option>
							<option value="3">ID</option>
						</select>
					</div>
					<div class="frCell">
						<input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." />
					</div>
					<div class="frCell">
						<input type="button" name="searchBtn" id="searchBtn" value="Search" />
					</div>
				</div>
			</form>
			<div id="dataContainer">

				<!--- Table 1 --->
				<div id="tbl1">
					<table class="tblData">
						<caption>User Info 1</caption>
						<tr>
							<th>Last Name</th>
							<td colspan="2" id="st_lname"></td>
							<th>First Name</th>
							<td colspan="2" id="st_fname"></td>
						</tr>
						<tr>
							<th>DOB</th>
							<td colspan="2" id="st_dob"></td>
							<th>Age</th>
							<td colspan="2" id="st_age"></td>
						</tr>
					</table>
				</div>

				<!--- Table 2 --->
				<div id="tbl2">
					<table class="tblData">
						<caption>User Info 2</caption>
						<tr>
							<th>Last Name</th>
							<td id="fi_adult1LName"></td>
						</tr>
						<tr>
							<th>First Name</th>
							<td id="fi_adult1FName"></td>
						</tr>
						<tr>	
							<th>Email</th>
							<td id="fi_email"></td>
						</tr>
						<tr>
							<th>Phone Number H</th>
							<td id="fi_adult1PhoneH"></td>
						</tr>
						<tr>
							<th>Phone Number W</th>
							<td id="fi_adult1PhoneW"></td>
						</tr>
						<tr>
							<th>Phone Number C</th>
							<td id="fi_adult1PhoneC"></td>
						</tr>
						<tr>
							<th rowspan="2">Adrress</th>
							<td id="fi_adult1AddrLine1"></td>
						</tr>
						<tr>
							<td id="fi_adult1AddrLine2"></td>
						</tr>
						<tr>
							<th>City</th>
							<td id="fi_adult1City"></td>
						</tr>
						<tr>
							<th>State</th>
							<td id="fi_adult1State"></td>
						</tr>
						<tr>
							<th>Zip</th>
							<td id="fi_adult1Zip"></td>
						</tr>
					</table>	
					<table class="tblData">
						<caption>User Info 3</caption>
						<tr>
							<th>Last Name</th>
							<td id="fi_adult2LName"></td>
						</tr>
						<tr>
							<th>First Name</th>
							<td id="fi_adult2FName"></td>
						</tr>
						<tr>
							<th>Email</th>
							<td id="fi_email2"></td>
						</tr>
						<tr>
							<th>Phone Number H</th>
							<td id="fi_adult2PhoneH"></td>
						</tr>
							<th>Phone Number W</th>
							<td id="fi_adult2PhoneW"></td>
						</tr>
						<tr>
							<th>Phone Number C</th>
							<td id="fi_adult2PhoneC"></td>
						</tr>
						<tr>
							<th rowspan="2">Adrress</th>
							<td id="fi_adult2AddrLine1"></td>
						</tr>
						<tr>	
							<td id="fi_adult2AddrLine2"></td>
						</tr>
						<tr>
							<th>City</th>
							<td id="fi_adult2City"></td>
						</tr>
						<tr>
							<th>State</th>
							<td id="fi_adult2State"></td>
						</tr>
						<tr>
							<th>Zip</th>
							<td id="fi_adult2Zip"></td>
						</tr>
					</table>
				</div>

				<!--- Table 3 --->
				<div id="tbl3">
					<table class="tblData">
						<tr><th>Some Data</th></tr>
					</table>
				</div>
			</div>
		</section>
	</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

CSS属性css overflow可能就是你要找的。

答案 3 :(得分：0)

您需要设置div overflow以滚动。

相关问题
最新问题