Question

好吧，我有一个奇怪的问题。我在最近几个小时里搜索了很多，所有类似的问题都不能完全适合我自己。

在我的网站上，所有带有第二个斜杠的网址在网站底部都有一个很大的空白区域。此空间上方的所有站点都是scrollabe。

我的所有网址都有相同的CSS文件

http://localhost/testurl
http://localhost/testurl/withanotherslash

第一个网址没有问题，而第二个网址有空白区域。我在两个网址中检查了相同的html文件。

以下是我在第二个网址中加载css的方法：

    <link rel="stylesheet" href="../static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/css/jquery-ui.css" />
    <link rel="stylesheet" href="../static/css/font-awesome.css" />
    <link rel="stylesheet" href="../static/css/unicorn.css" />

我在第二个网址中使用两个点，在第一个网址中使用一个点。我在Chrome和Firefox中测试它。

以下是截图：

screenshot

HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="../static/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../static/css/jquery-ui.css" />
        <link rel="stylesheet" href="../static/css/font-awesome.css" />
        <link rel="stylesheet" href="../static/css/unicorn.css" />



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/unicorn.js"></script>


    </head> 
    <body data-color="grey">
        <div id="wrapper">
            <div id="header">
                <div style="width:200px;">
                    <img style="display:block;margin-left:auto;margin-right:auto;padding-top:5px" src="../static/img/paulie.gif"/>
                </div>
            </div>

            <div id="sidebar">
                <div id="search" style="margin-top:80px">
                <form method="post" action="/authorsearch">
                    <input type="text" name='authorname' placeholder="Search for an author...">
                    <button type="submit"></button>
                </form>
                </div>
                <ul>
                    <li><a href="/"><i class="fa fa-home"></i><span>Dashboard</span></a></li>
                    <li><a href="/articles"><i class="fa fa-book"></i><span>Articles</span></a></li>
                    <li><a href="/editors"><i class="fa fa-user"></i><span>Editors</span></a></li>
                    <li><a href="/authors"><i class="fa fa-user"></i><span>Authors</span></a></li>
                    <li><a href="/countries"><i class="fa fa-globe"></i><span>Countries</span></a></li>
                    <li class="submenu">
                        <a href="#"><i class="fa fa-flask"></i><span>Settings</span></a>
                        <ul>
                            <li><a href="/settings/addarticle"><span>Add an article</span></a></li>
                            <li><a href="/settings/addauser"><span>Add a user</span></a></li>
                            <li><a href="/settings/allusers"><span>All users</span></a></li>
                        </ul>
                    </li>
                </ul>

            </div>

            <div id="content">
                <div id="content-header" class="mini">
                    <h1>My title</h1>
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-xs-12 center" style="text-align: center;">                  
                            <ul class="quick-actions">
                                <li>
                                    <a href="/">
                                        <i class="icon-home"></i>
                                        Dashboard
                                    </a>
                                </li>
                                <li>
                                    <a href="/articles">
                                        <i class="icon-survey"></i>
                                        Articles
                                    </a>
                                </li>
                                <li>
                                    <a href="/editors">
                                        <i class="icon-people"></i>
                                        Editors
                                    </a>
                                </li>
                                <li>
                                    <a href="/authors">
                                        <i class="icon-people"></i>
                                        Authors
                                    </a>
                                </li>
                                <li>
                                    <a href="/countries">
                                        <i class="icon-web"></i>
                                        Countries
                                    </a>
                                </li>
                            </ul>
                        </div>  
                    </div>
                    <br />
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-title">
                                    <h5>Users Database</h5>
                                </div>
                                <div class="widget-content nopadding">
                                    <table  id="myTable" class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>Username</th>
                                                <th>Password</th>
                                                <th>Delete</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            %for user in users:
                                            <tr>
                                                <td>{{user['username']}}</td>
                                                <td>{{user['password']}}</td>
                                                <td>test</td>
                                            </tr>                          
                                            %end            
                                        </tbody>
                                    </table>
                                </div>
                            </div>                  
                        </div>
                    </div>
                </div>

            </div>
            <div class="row" style="margin-bottom:0px">
                <div id="footer" class="col-xs-12">
                    2014 &copy; Title. Brought to you by <a href="#">me</a>
                </div>
            </div>
        </div>

    </body>

</html>

CSS文件来自此bootstrap template

这是我在Python Bottle中的后端以及我如何调用CSS文件：

@bottle.get('/static/css/<filename:re:.*\.css>')
def stylesheets(filename):
    return bottle.static_file(filename, root='./static/css/')

Answer 1

主题是如何设计的。在像this one这样的较短页面上，您会在较大的屏幕上看到这种差距。

一个简单的解决方案是将主体背景颜色设置为与页脚/包装颜色相同，这会将页脚颜色扩展到页面底部。 E.g。

body {background: #3c3c3c;}

另一种方法是使用粘性页脚设置，但是那个更糟糕，无论如何都可能看起来有点傻。

我网站底部的空白区域

1 个答案: