CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

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

我想让页脚

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

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

当前回答

只需将html、正文和除页脚之外的其他行设置为100%。如

<body>
<header></header>
<content></content>
<footer></footer>

the CSS becomes

html, body, header, content{
height:100%;
}

2014-07-15 13:07:10

其他回答

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

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;
}

2013-04-20 13:01:09

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

2018-01-16 14:46:04

这就是所谓的粘性页脚。在谷歌上搜索它会出现很多结果。我成功地使用过CSS Sticky Footer。但还有更多。

* { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here.</p> <div class="push"></div> </div> <div class="footer"> <p>Copyright (c) 2008</p> </div> </body> </html>

此代码的源代码

2009-03-13 18:00:15

我认为你可以将主要内容设置为视口高度，所以如果内容超过，主要内容的高度将定义页脚的位置

* { 保证金:0; 填充:0; 宽度:100%; ｝身体{ 显示:flex; flex-direction:列; ｝标题{ 高度:50 px; 背景:红色; ｝主要{ 背景:蓝色; /*这是最重要的部分身高:100 vh; ｝页脚{ 背景:黑色; 高度:50 px; 底部:0; ｝ <标题> < /头> 主要主要< > < / > <页脚> < /页脚>

2021-02-09 05:41:27

下面是我的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 >页脚> < /页脚 < /身体>

2013-12-03 13:50:28

CSS使HTML页脚保持在页面底部的最低高度，但不重叠页面

推荐文章

最新文章

标签