滚动保持不变

时间:2014-06-24 20:54:05

标签: html css html5 css3

所以我一直在为这个项目的webpanel工作,我想要保持与身体滚动。但不幸的是,我无法阻止它这样做。我想只用HTML / CSS做这件事。我只是不确定如何保持相同的外观,但固定位置。我没有尝试过任何工作。

这是jsfiddle:

Click here

<!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>

0 个答案:

没有答案