Code
2023-06-30 07:00:01

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

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

我想让页脚

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

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

当前回答

下面是我的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

其他回答

使用Flexbox保持页脚在底部

< div风格= "最小高度:100 vh;显示:flex;flex-direction:列; justify-content:之间的空间;" > < div > < !——包装(不带页脚)——> <标题> 我是头。 头> < / 文章< > 我是一篇文章! < / >的文章 < / div > < !——结束:包装器(没有页脚)——> <页脚> 我是一个脚注。 > < /页脚 < / div >

Note

确保你将所有内容包装在<div>或任何其他块级元素中，使用以下CSS样式:显示:flex;flex-direction:列;justify-content:之间的空间;． 确保在<div>或任何其他块级元素中包装了除页脚元素以外的所有内容。 确保您使用<footer>或任何其他块级元素来包装页脚。

代码的解释

Min-height: 100vh确保主体元素至少伸展到屏幕的全部高度 Flex-direction:列在保留堆叠块元素方面保持正常文档流的行为(假设主体的直接子元素确实都是块元素)。 对齐-内容:空格将页脚推到屏幕底部。

检查如何做同样的(保持页脚在底部)通过使用引导5 -链接

2021-06-05 06:20:53

我用这个把我的脚贴在底部，它对我有用:

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是你在HTML中唯一要做的修改，用“allButFooter”类添加div。我对所有的页面都这么做了，那些很短的页面，我知道页脚不会粘在底部，也有足够长的页面，我已经知道我必须滚动。我这样做了，所以我可以看到它在页面内容是动态的情况下工作得很好。

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

“allButFooter”类有一个min-height值，它取决于视口的高度(100vh意味着视口高度的100%)和页脚的高度，我已经知道是40px。

这就是我所做的，而且对我来说非常有效。我并没有在所有浏览器上都试过，只在Firefox、Chrome和Edge上试过，结果和我想要的一样。页脚贴在底部，不需要更改z-index、位置或任何其他属性。文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或其他任何位置。

使用响应式设计

有件事我想澄清一下。当我在使用Twitter-Bootstrap进行响应式设计时，这个解决方案，具有相同的40px高的页脚，并没有像我预期的那样工作。我必须修改函数中我要减去的值

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为Twitter-Bootstrap有自己的边距和填充，所以这就是为什么我必须调整这个值。

2016-03-22 16:41:40

我使用的一个简单的解决方案，从IE8+工作

在html上给min-height:100%，这样如果内容较少，那么页面仍然采用完整的视图高度，页脚贴在页面底部。当内容增加时，页脚随着内容向下移动，并保持贴在底部。

JS小提琴工作演示:http://jsfiddle.net/3L3h64qo/2/

Css

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

Html

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
2014-09-19 07:16:52

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
2018-01-16 14:46:04

这样做

<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不支持它。

2017-09-01 05:17:27

推荐文章

aliyun

最新文章

标签

2024 code 京ICP备15047053号-1