我有以下页面(deadlink: http://www.workingstorage.com/Sample.htm),有一个脚注,我不能坐在页面的底部。

我想让页脚

当页面较短且屏幕未被填充时,坚持在窗口底部 当有超过一个屏幕的内容时,保持在文档末尾,并像往常一样向下移动(而不是重叠内容)。

CSS是继承的,让我困惑。我似乎不能正确地改变它,把一个最小高度的内容或使页脚到底部。


当前回答

需要警惕的一件事是移动设备,因为它们以一种“不寻常”的方式实现视口的想法:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此,使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然,这取决于你所追求的具体行为。

我所使用的,并且在桌面和移动设备上运行良好的方法是:

<body>
    <div id="footer"></div>
</body>

with

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
 
#footer {
    position: absolute;
    bottom: 0;
}

其他回答

有些解决方案不适合我,但当我决定使用flex选项时,我发现最好的选择是下面的示例。

html, body{ height: 100%; } body{ display: flex; flex-direction: column; } .main-contents{ flex: 1 0 auto; min-height: 100%; margin-bottom: -77px; background-color: #CCC; } .footer{ height: 77px; min-height: 77px; width: 100%; bottom: 0; left: 0; background: #000000; flex-shrink: 0; flex-direction: row; position: relative; } .footer-text{ color: #FFF; } @media screen and (max-width: 767px){ #content{ padding-bottom: 0; } .footer{ position: relative; /*position: absolute;*/ height: 77px; width: 100%; bottom: 0; left: 0; } } <html> <body> <div class="main-contents" > this is the main content </div> </body> <footer class="footer"> <p class="footer-text">This is the sticky footer</p> </footer> </html>

下面是我的4种不同的方法:

在每个示例中,文本都是可自由编辑的,以说明内容在不同场景中的呈现方式。


1) 弹性框

车身{min-height: 100vh;保证金:0;} 标题{最低高度:50 px;背景:浅蓝色;} 页脚{最低高度:50 px;背景:番木瓜;} /*文章把页眉和页脚之间的空格都填满了*/ 身体{显示:flex;flex-direction:列;} 文章{flex: 1;} <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>


2)网格

身体{ 最小高度:100 vh; 保证金:0; 显示:网格; Grid-template-rows: auto 1fr auto; } 标题{ 最小高度:50 px; 背景:浅蓝色; } 页脚{ 最小高度:50 px; 背景:番木瓜; } <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>


下面的方法使用了一个“技巧”,在body上放置一个::after伪元素,并将其设置为与footer相同的高度,因此它将占据与footer相同的空间,因此当footer绝对定位在它上面时,它将看起来像footer真的占据了空间,并消除了它的绝对定位的负面影响(例如,越过body的内容)

3)位置:绝对(无动态页脚高度)

body{ min-height:100vh; margin:0; position:relative; } header{ min-height:50px; background:lightcyan; } footer{ background:PapayaWhip; } /* Trick: */ body { position: relative; } body::after { content: ''; display: block; height: 50px; /* Set same as footer's height */ } footer { position: absolute; bottom: 0; width: 100%; height: 50px; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> </body>


4)表布局

html{高度:100%;} Body {min-height:100%;保证金:0;} 标题{ 高度:50 px; 背景:浅蓝色; } {条 高度:1%; } 页脚{ 高度:50 px; 背景:番木瓜; } /****技巧:****/ 身体{ 显示:表; 宽度:100%; } Body > footer { 显示:作用是; } <身体> <头contentEditable >标题头> < / <文章contentEditable > < / >文章内容 <页脚contentEditable >页脚> < /页脚 < /身体>

对我有用。

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

#{容器 身高:100 vh; 保证金:0; 显示:flex; flex-direction:列; } #页脚{ margin-top:汽车; } < div id = "容器" > < div id = "头" >头< / div > 身体< div id = "身体" > < / div > < div id = "脚注" >页脚< / div > < / div >

这样做

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读flex,它被所有现代浏览器所支持

更新:我读过flex并尝试过。这对我很管用。希望你也能这样。以下是我的实现方法。这里main不是ID,而是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里你可以阅读更多关于flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住,旧版本的IE不支持它。

你需要使用position: absolute;这很重要,下面是0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}