Question

我正在使用一个响应表，它位于屏幕顶部的固定导航栏之间，另一个固定在屏幕顶部（这是我的页脚）

你可以看到它here（通过可视化我没有做过小提琴）。

<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap Tema opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>
    #tablecontainer{
        margin-top: 60px;
    }
    #footer{
        margin-top: 120px;
    }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">NavbarBrand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="afile.html">Simple link</a></li>
      </ul>
    </div><!-- fin navbar-collapse -->
  </div><!-- fin container-fluid -->
</nav>

<div class="container-fluid" id="tablecontainer">
  <center>
    <div class="table table-responsive">
        <section>
          <table class="table">
                  <thead>
                    <tr>
                      <th>thisisaveryverylongword</th>
                      <th>thisisaveryverylongword</th>
                      <th>thisisaveryverylongword</th>
                      <th>thisisaveryverylongword</th>
                      <th>thisisaveryverylongword</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                    <tr>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                        <td>thisisaveryverylongword</td>
                    </tr>
                  </tbody>
                </table>
        </section>
    </div>
    <br><br>
  </center>
</div>
<div id="footer">
  <div class="navbar navbar-inner  navbar-fixed-bottom navbar-inverse mifooter">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
          <p style="color:white">somecontent</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

如果您调暗屏幕宽度（例如900px），然后转到表格底部，则可以看到表格末尾的水平滚动条。

我需要水平滚动条始终可见，因为无论我是在开头，中间还是在结尾，总是将其显示在我的页脚之上是最佳的。表

我已经尝试了他们在this帖子中所说的内容，但由于我的网页结构，它对我不起作用。

我会感激任何帮助。

编辑：我需要像现在一样保持我的页脚。

Answer 1

假设您想要保持样式，您需要摆脱页脚上的fixed定位。

#footer .navbar{ position: static; }

取消#footer上的保证金：

    #footer{ margin-top: 120px; }

并删除两个随机br标记以及center：

<br><br></center>

http://codepen.io/anon/pen/QdvQeO

将响应表水平滚动条保持在我的页脚上方

1 个答案: