Question

我正在设计一个页面末尾有页脚的网页。当然，即使内容的长度小于页面的实际高度，您也希望页脚粘在页面底部。经过一番搜索，我发现要走的路是将页脚绝对放在底部：0px的身体，让身体填满整个页面。对？错误。无论我尝试什么，页面的主体都会向下缩小以适应其中的元素（我尝试了CSS和JS，没有用），就在我即将放弃的时候，我在互联网上发现了一个样本。完全相同的事情。经过另外两个小时的敲击，我发现那个页面与我之间的区别在于我的开头有一个标签（由Visual Studio放置）。

我做了一些进一步的研究，但是我找不到任何解释为什么会发生这种情况，或者更重要的是，不包括doctype的后果是什么？这会在以后导致问题吗？如果是这样，我该如何处理身体元素的高度？

编辑：这是我身体的CSS：

body {
background-image: url("images/back.png");
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
}

这是HTML（实际上是ASP）：

<%@ Page Language="C#" %>

<!DOCTYPE HTML> <!-- this line (included by default by Visual Studio) causes the body's height to snap to its contents, as height: auto does -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="header.js"></script>
</head>
<body>
.
.
.
</body>
</html>

我还尝试过在网上找到的各种其他文档，我仍然得到了相同的结果。

Answer 1

这是一个如何使用css在屏幕上定位的简单示例。请检查此fiddle。

<div class="bottom"></div>

.bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 20px;
    background-color: black;
}

Answer 2

您可能正在寻找一种解决方案，将您的网站页脚粘贴到底部。这通过ajax加载内容成为一个真正的问题，在加载期间，整个Web内容都会变为空白。

我最终发现比其他任何一个更好的解决方案是给你的身体和html以及除了你的另一个div中的页脚之外的所有内容高度100％并给它一些填充。填充有助于使用绝对位置在底部为您的页脚清理空间，否则您的内容也会与页脚重叠。

以下是一个例子：

html, body {
    height: 100%;
}
.container {
    padding-bottom: 20px; /* if your footer height is 20px including paddings and margins */
}
.footer {
    position: absolute;
    bottom: 0px;
}

如果您希望它位于页面的中心，您可以将页脚的宽度设置为100％并将文本对齐中心。

-

就Doctypes而言，我们大多数人都使用这个标准 - 它更好地保持这种方式，因为它使浏览器很容易理解它是什么类型的HTML。

影响大小，无法填满整个窗口

2 个答案: