粘性页脚问题 [英] Sticky footer problem
问题描述
嗨。
我的网站上有一个粘性页脚。 "粘性页脚"是指一个页脚，它粘贴在浏览器窗口的
底部，而不是网页底部的页脚。
这是粘性页脚的示例代码，删除了所有不必要的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
html {
overflow-y: scroll;
text-align: center;
}
body {
margin:auto;
background-color:grey;
}
#container {
width: 1000px;
margin: auto;
}
.box {
color: white;
background-color: green;
float: left;
width: 1000px;
margin: 10px 0px 30px 0px;
}
#footer {
color: white;
background-color: black;
font-family: "Times New Roman";
width: 1000px;
bottom: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="box"><p>Content goes here</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p></div>
<div id="footer">Sticky footer goes here</div>
</div><!-- end container div -->
</body>
</html> 如果你测试代码，你会看到页脚总是卡在浏览器窗口的底部
，如果你降低浏览器窗口的高度，内容和页脚之间存在小的差距。这正是我想要的。到目前为止一切顺利！
问题是我喜欢在设计视图中进行少量编辑，虽然 Design
View可以很好地呈现页面，它不喜欢我的粘性页脚！页脚不会卡在屏幕底部，而是粘贴在屏幕左侧，文本卡在屏幕右侧！这非常令人沮丧，因为它与我的其他内容重叠了
。显然我无法发布问题的屏幕截图，因为我的帐户未经过"验证"。
The problem is I like to make minor edits in Design View and, although Design
View does render pages quite well, it does not like my sticky footer! Instead of being stuck at the bottom of the screen the footer is stuck to the left of the screen with the text stuck to the right of the screen! This is highly frustrating as it overlaps
my other content. Apparently I can't post a screenshot of the problem as my account isn't 'verified'.
鉴于SuperPreview没有超越IE8，我假设Expression Web 4在IE8上使用基于
的渲染引擎（或更糟！）。有谁知道在Expression Web Design View中让我的页脚粘在屏幕底部的方法？也许需要一个IE补丁？我的现有代码是好还是坏？
我非常感谢您提供的任何帮助。在此先感谢。
推荐答案
设计窗格不是浏览器。它必须做很多浏览器无法做到的事情（概述元素，标签等）。它也不呈现任何活动内容（Flash，javascript等）。
The Design Pane is NOT a browser. It has to do a LOT of things that a browser can't do (outlining elements, labels, etc.). It also doesn't render any active content (Flash, javascript, etc.).
设计窗格是一个草图。您必须经常在多个浏览器（4或5个主要浏览器）中进行预览，以检查每个浏览器中的实际渲染 - 它们可能不同，因为它们具有不同的渲染引擎，这些引擎具有自己的规则。
The Design Pane is a sketchpad. You must preview frequently in multiple browsers (the 4 or 5 major ones) in order to check the actual rendering in each--they can differ, since they have different rendering engines that have their own rules.
EW不是一个拖放式编辑器;您的大部分工作都是在代码窗格中的拆分视图中完成的，而不是在设计窗格中完成。
EW is not a drag-and-drop editor; most of your work is done in split view in the Code Pane, not in the Design Pane.
我们不需要截屏。阅读论坛常见问题;如果您有渲染问题，则需要在线发布问题站点/页面的链接。这是我们看到实际情况的唯一途径 - 网站的所有部分一起工作 - 所以我们可以检查
的详细信息和代码（就像机械师无法诊断的那样）通过查看汽车照片看汽车的问题。）
We don't need screen shots. Read the Forum FAQ; if you have rendering issues, you need to post a link to the problem site/page online. That's the only way for us to see what's really going on--with all the parts of the site working together--so we can examine the details and code (in the same way that a mechanic can't diagnose a car's problem by looking at a photo of the car).
鉴于您发布的代码，我没有看到您描述的渲染问题。页脚和文本在设计窗格中居中。
Given the code you posted, I don't see the rendering issue you describe. The footer and text is centered in the Design Pane.
这篇关于粘性页脚问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
