Question

目前，我正试图获取此页面的页脚（＃bottom-wrap） - 留在所述页面的底部。

显然，在较小的页面上，它会浮动到顶部，但在较大的页面上，它在底部很好。例如：

我希望这可以在所有屏幕尺寸上保持可持续性，所以最小尺寸：xpx不会真正削减它我不认为。我玩弄了绝对和相对的定位，但我似乎无法在不截断较大页面上的数据的情况下在两个页面上工作。

Answer 1

虽然其他答案中的一些解决方案有效，但它们有各种缺点 - 例如，除了主要内容和页脚位之外，还需要某种HTML结构。

Flexbox (Flexible Box Layout Module)是用于处理完全的情况的布局技术，就像粘性页脚模式一样。

查看Philip Walton的"Solved by flexbox"，其中有一节介绍它是如何运作的。

我还撰写了一篇关于how to adapt that one for IE10-11的博客文章。（遗憾的是，IE＆lt; 10不支持flexbox，但粘性页脚模式通常主要是美学选择而非必需品，因此您可以覆盖大多数用户。）

Answer 2

我使用此tutorial制作了粘性页脚。我认为使用起来既方便又方便。

CSS代码

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

HTML CODE

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

<强> DEMO URL

Answer 3

你走了。页脚贴到底部。只需使用此代码：

#bottom-wrap {
    position: absolute;
    width: 100%;
    bottom: 0px;
 }

Answer 4

就像链接一样：

#bottom-wrap {
position: absolute;
width:100%;
height:300px;
bottom:0px;
}

对于固定底部：

#bottom-wrap {
position: fixed;
width:100%;
height:300px;
bottom:0px;
}

Answer 5

#bottom-wrap {
     position: absolute;
     width: 100%;
     height: auto;
     max-height: 300px;
     bottom: 0px;
}

Answer 6

查看我对THIS问题的回答。您可以轻松调整我的＆＃34; push元素＆＃34;解。它适用于所有浏览器包括ie7和所有宽度。

页面底部的CSS页脚

6 个答案: