-1
我忘了提及这个页面在iframe中。这里是我的iframe代码：如何将滚动条设置为区域内的div容器？
<iframe src="pgHome.html" name="hmFrame" id="hmFrame" frameborder="0" scrolling="no" width="100%" height="100%"></iframe>
如果我设置SCROLLING =“是”我的整个框架将滚动，但我仍然不能得到滚动在我的div容器中工作。
我有一些问题，设置div容器上的滚动条。该容器从导航栏加载每个项目的表格。有些桌子不适合在屏幕上。我想在div容器或表格上设置滚动条。这里是我的HTML表：
$('.xNavigation a').on('click', function() {
\t \t var id = $(this).prop('id');
\t \t $('#dataContainer > div[id=' + id + ']').show();
\t \t $('#dataContainer > div:not([id=' + id + '])').hide();
\t });div.container {
\t width: 100%;
\t height: 100%;
\t font-family: Arial;
\t font-size: 12px;
}
aside.sidebar {
width: 120px;
\t margin: 0;
\t padding-top: 0;
\t float: left;
\t background-color: white;
}
aside.sidebar h3 {
\t margin: 0;
\t background-color: #000099;
\t color: white;
\t text-align: left;
\t padding: 2px;
}
section.mainBox{
\t min-width: 1000px;
\t margin-left: 5px;
\t padding-top: 0;
\t float: left;
\t background-color: white;
\t overflow-y: scroll;
\t height: 800px;
}
section.mainBox h3 {
\t margin: 0px;
\t background-color: #000099;
\t color: white;
\t text-align: left;
\t padding: 2px;
}
div #dataContainer > div:not([id="tbl1"]) {
\t display: none;
}
nav.yNavigation {
\t margin: 0;
\t background-color: #c8e2db;
}
nav.yNavigation ul {
\t list-style: none;
\t margin: 0;
\t padding-left: 5px;
}
nav.yNavigation a {
\t color: black;
\t text-decoration: none;
\t cursor: pointer;
\t font-weight: bold;
}
nav.yNavigation a:hover {
\t color: #999999;
}
nav.xNavigation {
\t width: 100%;
\t margin-left: 0;
\t margin-right: 0;
\t padding-top: 2px;
\t margin-bottom: 5px;
\t background-color: #c8e2db;
\t float: left;
\t border-bottom: 2px solid black;
\t min-height: 18px;
}
nav.xNavigation a {
\t color: black;
\t text-decoration: none;
\t cursor: pointer;
\t font-weight: bold;
\t padding-left: 5px;
\t padding-right: 5px;
}
nav.xNavigation a:hover {
\t color: #999999;
}
div.frRow {
\t margin: 5px;
\t display: table;
}
div.frCell {
\t display: table-cell;
\t padding: 5px;
}
table.tblData {
\t border: #ccc 1px solid;
\t margin: 10px;
\t border-radius:3px;
}
table.tblData caption {
\t font-weight: bold;
\t margin-bottom: 2px;
\t background-color: #ededed;
\t border: #ccc 1px solid;
\t border-radius: 3px;
\t padding:5px 10px 5px 10px;
}
table.tblData th {
\t padding:5px 10px 5px 10px;
\t border-top:1px solid #fafafa;
\t border-bottom:1px solid #e0e0e0;
\t background: #ededed;
\t text-align: center;
}
table.tblData td {
\t padding:5px;
\t border-top: 1px solid #ffffff;
\t border-bottom:1px solid #e0e0e0;
\t border-left: 1px solid #e0e0e0;
\t background-color: #c8e2db;
\t min-width: 30px;
\t text-align: left; \t
}<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>
\t <meta http-equiv="X-UA-Compatible" content="IE=10; IE=11" />
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <title>Home Page</title>
</head>
<body>
\t <div class="container">
\t \t <aside class="sidebar">
\t \t \t <h3>Menu</h3>
\t \t \t <nav class="yNavigation">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="pgHome.html">Home</a></li>
\t \t \t \t \t <li><a href="pgReports.html">Reports</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </aside>
\t \t <section class="mainBox">
\t \t \t <h3>Home Page</h3>
\t \t \t <nav class="xNavigation">
\t \t \t \t <a href="#" id="tbl1">Table 1</a> |
\t \t \t \t <a href="#" id="tbl2">Table 2</a> |
\t \t \t \t <a href="#" id="tbl3">Table 3</a> |
\t \t \t </nav>
\t \t \t <form name="searchForm" id="searchForm" action="pgHome.html" method="POST">
\t \t \t \t <div class="frRow">
\t \t \t \t \t <div class="frCell">
\t \t \t \t \t \t <select name="myMenu" id="myMenu" style="width:80px;">
\t \t \t \t \t \t \t <option value="1">Name</option>
\t \t \t \t \t \t \t <option value="2">DOB</option>
\t \t \t \t \t \t \t <option value="3">ID</option>
\t \t \t \t \t \t </select>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="frCell">
\t \t \t \t \t \t <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." />
\t \t \t \t \t </div>
\t \t \t \t \t <div class="frCell">
\t \t \t \t \t \t <input type="button" name="searchBtn" id="searchBtn" value="Search" />
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </form>
\t \t \t <div id="dataContainer">
\t \t \t \t <!--- Table 1 --->
\t \t \t \t <div id="tbl1">
\t \t \t \t \t <table class="tblData">
\t \t \t \t \t \t <caption>User Info 1</caption>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Last Name</th>
\t \t \t \t \t \t \t <td colspan="2" id="st_lname"></td>
\t \t \t \t \t \t \t <th>First Name</th>
\t \t \t \t \t \t \t <td colspan="2" id="st_fname"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>DOB</th>
\t \t \t \t \t \t \t <td colspan="2" id="st_dob"></td>
\t \t \t \t \t \t \t <th>Age</th>
\t \t \t \t \t \t \t <td colspan="2" id="st_age"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t </table>
\t \t \t \t </div>
\t \t \t \t <!--- Table 2 --->
\t \t \t \t <div id="tbl2">
\t \t \t \t \t <table class="tblData">
\t \t \t \t \t \t <caption>User Info 2</caption>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Last Name</th>
\t \t \t \t \t \t \t <td id="fi_adult1LName"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>First Name</th>
\t \t \t \t \t \t \t <td id="fi_adult1FName"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr> \t
\t \t \t \t \t \t \t <th>Email</th>
\t \t \t \t \t \t \t <td id="fi_email"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Phone Number H</th>
\t \t \t \t \t \t \t <td id="fi_adult1PhoneH"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Phone Number W</th>
\t \t \t \t \t \t \t <td id="fi_adult1PhoneW"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Phone Number C</th>
\t \t \t \t \t \t \t <td id="fi_adult1PhoneC"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th rowspan="2">Adrress</th>
\t \t \t \t \t \t \t <td id="fi_adult1AddrLine1"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td id="fi_adult1AddrLine2"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>City</th>
\t \t \t \t \t \t \t <td id="fi_adult1City"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>State</th>
\t \t \t \t \t \t \t <td id="fi_adult1State"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Zip</th>
\t \t \t \t \t \t \t <td id="fi_adult1Zip"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t </table> \t
\t \t \t \t \t <table class="tblData">
\t \t \t \t \t \t <caption>User Info 3</caption>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Last Name</th>
\t \t \t \t \t \t \t <td id="fi_adult2LName"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>First Name</th>
\t \t \t \t \t \t \t <td id="fi_adult2FName"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Email</th>
\t \t \t \t \t \t \t <td id="fi_email2"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Phone Number H</th>
\t \t \t \t \t \t \t <td id="fi_adult2PhoneH"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t <th>Phone Number W</th>
\t \t \t \t \t \t \t <td id="fi_adult2PhoneW"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Phone Number C</th>
\t \t \t \t \t \t \t <td id="fi_adult2PhoneC"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th rowspan="2">Adrress</th>
\t \t \t \t \t \t \t <td id="fi_adult2AddrLine1"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr> \t
\t \t \t \t \t \t \t <td id="fi_adult2AddrLine2"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>City</th>
\t \t \t \t \t \t \t <td id="fi_adult2City"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>State</th>
\t \t \t \t \t \t \t <td id="fi_adult2State"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <th>Zip</th>
\t \t \t \t \t \t \t <td id="fi_adult2Zip"></td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t </table>
\t \t \t \t </div>
\t \t \t \t <!--- Table 3 --->
\t \t \t \t <div id="tbl3">
\t \t \t \t \t <table class="tblData">
\t \t \t \t \t \t <tr><th>Some Data</th></tr>
\t \t \t \t \t </table>
\t \t \t \t </div>
\t \t \t </div>
\t \t </section>
\t </div>
</body>
</html>所以我的第一个问题是在哪里是把滚动条的最佳地点？此外，我想让我的侧栏和顶栏静止。如果用户滚动页面，那么这两个应该保持在顶部可见。同样在平板电脑和小屏幕尺寸的移动设备上，这将需要一些滚动。有更好的方法来处理CSS/HTML 5/JQuery的这个问题吗？
你的HTML是无效的机智h该脚本未被包含在'
'中。您也声称使用XHTML，但您并未使用XHTML。另外，meta标签没有结束斜线。 – Rob我认为script标签可以在html标签之外？ –