-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標籤之外？ –