html - 页脚没有放置在正确的位置

Question

我在 CSS 方面不是那么好。我正在尝试制作一个 HTML 结构，但我无法将页脚放在正确的位置。这是一个链接，您可以在其中查看和测试代码。你能建议一些东西吗？我必须说我不希望页脚 div 获得position:fixed选项。

Answer 1

删除id的位置#placeHolder 并footer_area添加css

#placeHolder {
    background-color: #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    margin: 0 auto;
    padding-bottom: 10%;
    width: 70%;
}


.footer_area {
    background-position: 0 0;
    border-radius: 5px 5px 5px 5px;
    clear: both;
    color: #333333;
    font: 12px/25px Arial,Helvetica;
    height: 10%;
    margin: 40px auto 0;
    padding-top: 10%;
    text-align: center;
    width: 70%;
}

Answer 2

可以帮助您更好地理解 CSS 工作原理的几件事是相对、绝对、静态和固定的工作方式。

如需快速复习，您可以在此处查看http://www.w3schools.com/cssref/pr_class_position.asp

默认情况下，您的所有元素都是静态定位的，并且所有元素都以分层模式继承它们的定位。IE DOM 中的第一个元素首先出现，然后是以下等。

在这种情况下，您已将 #placeholder 元素定位为 position:absolute; 结果是#placeholder 被从其他元素中提取出来并放置在它的顺序之外，它现在尊重body 标签并相对于body 标签进行放置。这里唯一的例外是，如果您使用 position:relative 修改 #placeholder 的父元素，那么 #placeholder 将采用相对于该元素而不是 body 元素的绝对定位。

其次，我可以看到您正在尝试使用百分比基数将元素对齐到靠近窗口中心的位置。在这种情况下 15%，这不会为您的内容提供绝对中心。发生的情况是当前窗口宽度的 15%（假设我的浏览器打开到 1000 像素宽）将返回当前窗口宽度的 15%，在这种情况下为 150 像素；本质上，您最终将元素的左侧定位在距离窗口左侧 150px 的位置。

此外; 必须将这种定位放在所有元素上可能会变得有点麻烦。让您的生活更轻松的一个小技巧是将您的所有内容包装在一个 div 中并将这个 div 归类。我通常会将其分类为<div class="wrapper">然后在您的 css 中您可以为 .wrapper 提供 1000px 或 70% 的宽度（在您的情况下）和margin:0 auto; 这将自动为您将此 div 的内容居中，从而使您的网站居中。如果您想让它适用于真正的旧浏览器，请保留我演示过的相同内容，只需再添加两个属性。body{text-align:center;}的第一个 CSS 属性和.wrapper{text-align:left;}的第二个。如果您仍然关心 ie6，这将使它在 IE6 中工作。它的作用是对齐第一个<div class="wrapper">到正文的中心，然后指定包装器中的所有内容都应该左对齐，这使得当你添加 dom 元素或文本时它很好地对齐到左边，这样你就可以正常阅读了。

希望这可以帮助