CSS脚注从cssstickyfooter.com不能正常工作 [英] CSS footer from cssstickyfooter.com not working correctly
问题描述
我从 http://www.cssstickyfooter.com/ 获得了一些简单的CSS，以获取页脚无论内容多长，总是坚持。现在，这不是真的工作。我有两个不同的问题，这个页脚，但我要问他们在这里，因为我怀疑他们是相关的。
I got some simple CSS from http://www.cssstickyfooter.com/ to get a footer that always sticks no matter how long the content is. Now, this isn't actually working. I'm having two different problems with this footer, but I'm going to ask them both here because I suspect they're related.
这里的css从网站：
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
这里是我用于整个页面的HTML ：
And here's the HTML I'm using for the whole page:
<html>
<head>
<title>{$title_text}</title>
<link rel="stylesheet" type="text/css" href="/global/global.css" />
</head>
<body>
<div id="wrap">
{$navbar}<hr><div id="content">{$body}</div>
</div>
<div id="footer">
{$footer}
</div>
</body>
</html>
可以看到，有一些变量格式化为 {$ variable} 。
As you can see, there are some variables formatted as {$variable}. These are pulled from another file/string.
页脚太高，页面上的其他内容。下面是这个样子：
The footer is too high and overlaps with the other content on the page. Here's what that looks like:
为了尝试解决这个问题，我做的是添加200px填充到ID wrap ，就在脚注之前（见上面的HTML）。这将解决你看到的图片中的问题。但它导致另一个问题：现在在页面上内容很少，页脚仍然向下移动200px，你必须向下滚动才能看到它。网站我得到这个CSS代码不应该发生。
To try to solve this problem, what I did was I added 200px of padding to the div of ID wrap, which is right before the footer (see HTML above). This will fix the problem you see in the picture there. But it causes another issue: now on pages with very little content, the footer is still moved down 200px, and you have to scroll down to see it. The site I got this CSS code from said this shouldn't happen.
没有到达浏览器窗口的边缘。这里是我在说什么：
The footer doesn't reach the edges of the browser's window. Here's what I'm talking about:
页脚应该是触摸窗口的右侧和左侧，但正如你可以看到，似乎有一个小的边距。老实说，我不知道如何开始修复这个。但我不认为这是一个错误，因为它在Chrome，Firefox和我想，即使在Internet Explorer中也是一样的。
The footer should be "touching" the right and left sides of the window, but as you can see, there seems to be a small margin. Honestly, I'm not sure how to start fixing this. But I don't think it's a bug because it renders the same way in Chrome, Firefox, and I think even in Internet Explorer.
欢迎任何输入。感谢您查找！
Any input is welcome. Thanks for looking!
推荐答案
您的HTML不符合您的CSS。您的css包含#main，但您的主要内容显示在
Your html doesn't appear to match your css. Your css contains a '#main' but your main content appears in
<div id="content">...</div>
这篇关于CSS脚注从cssstickyfooter.com不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
