我网站底部的空白区域
[英]White space at the bottom of my website
问题描述
Well, I have a weird problem.
好吧，我有一个奇怪的问题。 I search a lot for the last several hours and all the similar problems couldn't fit exactly on my own.在过去的几个小时里，我搜索了很多，所有类似的问题都不能完全适合我自己。
In my website, all the urls with a second slash have a big white space at the bottom of the website.在我的网站中，所有带有第二个斜杠的网址在网站底部都有一个很大的空白区域。 All the site above this space is scrollabe.此空间上方的所有站点都是滚动条。
I have the same CSS file in all my url我的所有 url 中都有相同的 CSS 文件
http://localhost/testurl
http://localhost/testurl/withanotherslash
The first url doesn't have a problem, while the second has the white space.第一个网址没有问题，而第二个网址有空格。 I checked the same html file in both urls.我在两个 url 中检查了相同的 html 文件。
Here is how I load the css in the second url:这是我在第二个 url 中加载 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" />
I use two dots in the second url and one dot in the first url.我在第二个 url 中使用两个点，在第一个 url 中使用一个点。 I test it in Chrome and Firefox.我在 Chrome 和 Firefox 中对其进行了测试。
Here is a screenshot:这是一个屏幕截图：
HTML Code: 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 © Title. Brought to you by <a href="#">me</a>
</div>
</div>
</div>
</body>
</html>
The CSS file is from this bootstrap template CSS 文件来自这个引导模板
And here is my backend in Python Bottle and how I call the CSS files:这是我在 Python Bottle 中的后端以及我如何调用 CSS 文件：
@bottle.get('/static/css/<filename:re:.*\.css>')
def stylesheets(filename):
return bottle.static_file(filename, root='./static/css/')
1 个解决方案
解决方案1
1 已采纳 2014-03-29 11:36:03
That's how the theme is designed to work.这就是主题的设计方式。 On a shorter page like this one you'll see that gap on larger screens.在像这样一个较短的页面上，您会在较大的屏幕上看到该间隙。
An easy solution is to set the body background color to the same as the footer/wrapper color, which extends the footer color to the bottom of the page.一个简单的解决方案是将正文背景颜色设置为与页脚/包装颜色相同，这将页脚颜色扩展到页面底部。 Eg例如
body {background: #3c3c3c;}
An alternative would be to use a sticky footer setup, but that's messier and might look a bit silly anyhow.另一种方法是使用粘性页脚设置，但这更麻烦，而且看起来可能有点傻。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.