所以我一直在为这个项目的webpanel工作,我想要保持与身体滚动。但不幸的是,我无法阻止它这样做。我想只用HTML / CSS做这件事。我只是不确定如何保持相同的外观,但固定位置。我没有尝试过任何工作。
这是jsfiddle:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>BMRF Moderator Panel</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="top-bar">
<div class="page-full-width clearfix">
<ul id="nav" class="fl">
<li class="v-sep"><a href="#" class="button round dark image-left ic-left-arrow"> Return to BMRF</a>
</li>
<li> <a href="#" class="button round dark image-left ic-user-menu">Logged in as Moderator</a>
<ul>
<li><a href="#" class="password list-item-bullet">Change password</a>
</li>
</ul>
</li>
<li><a href="#" class="button round dark image-left ic-log-out">Log out</a>
</li>
</ul>
<form action="#" id="search-form" class="fr">
<fieldset>
<input type="text" id="search-keyword" placeholder="Search..." class="button round dark image-right ic-search" />
<input type="hidden" value="submit" />
</fieldset>
</form>
</div>
<!-- end page-full-width -->
</div>
<!-- end top-bar -->
<div id="header-width-tabs">
<div class="page-full-width clearfix">
<ul id="tabs" class="tabs">
<li><a href="#" class="dashboard-tab active-tab">Dashboard</a>
</li>
<li><a href="#">Second Tab</a>
</li>
<li><a href="#">Third Tab</a>
</li>
</ul> <a href="#" id="bmrf-logo-small" class="fr"><img src="img/bmrf-logo.png" alt="BMRF" /></a>
</div>
</div>
<!-- end header -->
<div id="content">
<div class="page-full-width clearfix">
<div class="side-menu fl">
<h3>Side Menu</h3>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
</ul>
</div>
<div class="side-content fr">
<div class="content-module">
<div class="content-module-heading clearfix">
<h3 class="fl">Player List</h3>
</div>
<div class="content-module-main clearfix">
<div id="table-scroll">
<table>
<thead>
<tr>
<th>
<input type="checkbox" />
</th>
<th>Name</th>
<th>IP Address</th>
<th>Player ID</th>
<th>Forum ID</th>
<th>GUID</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" class="table-footer">
<label for="table-footer-actions">With selected:</label>
<select name="table-footer-actions">
<option value="op1">Ban</option>
<option value="op2">Delete</option>
<option value="op3">Kick</option>
</select> <a href="#" class="round button blue text-upper">Apply to selected</a>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Peep</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Corsair</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>skulbuny</td>
<td>123.1.123.10</td>
<td>1010101010</td>
<td>12345</td>
<td>dsfhsdjkbfnjshdfjshdfjskdhfjkshd</td>
</tr>
</tbody>
</table>
</div>
<div class="content-chat-heading clearfix">
<h3 class="fl">Chat</h3>
</div>
<div class="outChat">
<div class="inChat"></div>
</div>
<ul id="messages"></ul>
<form action="">
<input id="message" autocomplete="off" />
<button class="round">Send</button>
</form>
</div>
</div>
</div>
<!-- End page-full-width -->
</div>
<!-- end content-->
<div id="footer">
<p>Made with love by Taylor Schneider</p>
</div>
<!-- end footer -->
</body>