Question

我对CSS不太好。我正在尝试制作HTML结构，但我无法将页脚放在正确的位置。这是一个link，您可以在其中查看和测试代码。你能建议一下吗？我必须说我不希望页脚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

默认情况下，所有元素都是静态定位的，并且所有元素都以层次结构模式继承它们的位置。 I.E. DOM中的第一个元素首先出现以下等等。

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

其次，我可以看到您正在尝试使用百分比基础来实现靠近窗口中心的元素对齐。在这种情况下，15％，这不会给你一个绝对的内容中心。当前窗口宽度的15％（假设我的浏览器打开到1000px宽）将返回15％的当前窗口宽度，在这种情况下为150px;本质上，你最终将窗口左侧的元素150px左侧定位。

此外;必须将这种定位放在所有元素上会变得有点麻烦。让你的生活更轻松的一个小技巧是将你的所有内容包装在一个div中并对这个div进行分类。我通常会把它分类为<div class="wrapper">然后在你的css中，你可以给你的.wrapper宽1000px或70％的情况和 margin：0 auto; 这会自动将内容中心化这个div为你，因此中心你的网站。如果你想让它真正适用于旧的浏览器保持相同的内容我已经演示只添加了两个属性。 正文{text-align：center;} 的第一个CSS属性，第二个指向 .wrapper {text-align：left;} 的CSS属性。如果您仍然关心ie6，这将使它在IE6中工作。它的作用是将第一个<div class="wrapper">与主体的中心对齐，但是然后指定包装器中的所有内容都应该左对齐，这样就可以在添加dom元素或文本时将其与左边很好地对齐，这样你就可以阅读了通常。

希望这有帮助

页脚未放置在正确的位置

2 个答案: