更新

Question

我正在尝试编写没有包装器的干净代码。那么让我举个例子

<head>
</head>
<body>
    <header>Header and nav section (Leaving nav in header is good way?)</header>
    <article>Main content. This part should stretch</article>
    <aside>Not so important but desktop view still have place for it</aside>
    <footer>Just footer but sticky</footer>
</body>

第一次尝试是给页脚

position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;

和身体

margin: 0 0 100px;

之后只需将min-height: 100%;设置为html即可。现在我试图把它放在页脚的顶部，我不能，因为我需要拉伸文章来覆盖页面的其余部分。

最后问题是：如果旁边的大小根据子网站的变化而变化，我怎么能实现这个呢？我不想使用包装器，因为它们有点难看？

另外可以使用 html5 / css3 魔法（我发现建议使用flex但没有示例......）并且仍然与ie8兼容。可悲的是，在我的国家，XP的使用仍然很大。

我在SO上花了几天时间，我发现很多例子都使用了整个页面的包装，其中包含页脚和内容的页脚和内容，将页脚留作另一个框，但这不是我想要的。

更新

我部分找到了解决方案。 Link to snippet

但现在我又遇到了一个奇怪的问题。以下是示例my page

我在页脚下方有一个空白区域，根据chrome和IE中的开发工具，这部分属于无处。这怎么可能？

Answer 1

1.脚部应固定位置 2.for body：不要使用保证金，使用position:fixed; bottom:100px; 3.min高度：100％。嗯，这有点胡说八道。只需使用height:100%;

即可

另一个粘性页脚/ 100％高度div与干净的代码

更新

1 个答案: