css 在内容很少的页面上强制页脚在底部

tkclm6bt 于 2023-08-08 发布在其他

关注(0)|答案(9)|浏览(140)

我有一个只有几行内容的页面。我希望页脚被推到底部。

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

字符串
我不想用

#footer
{
    position:fixed;
    bottom:0;
}

型
又名粘页脚
如果没有jQuery，这可能吗？
有什么建议吗？

css

来源：https://stackoverflow.com/questions/16679146/force-footer-on-bottom-on-pages-with-little-content

9条答案

按热度按时间

fgw7neuy1#

这个Flexbox解决方案更简洁，更容易实现：

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

字符串

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

型
只要确保将必要的divs Package 在body中即可。

赞(0）回复(0）举报 2023-08-08

4bbkushb2#

更新2021 - CSS GRID

这是一个使用CSS Grid的解决方案，这是到目前为止在2021年最好的方法。

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "footer";
    grid-template-rows: 1fr 80px;
}
main {
    background-color: #F8BBD0;
    grid-area: main;
}
footer {
    background-color: #7E57C2;
    grid-area: footer;
}

个字符

旧答案

还有一个sticky footer by Ryan Fait不使用位置固定：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

型

赞(0）回复(0）举报 2023-08-08

fdbelqdn3#

这里有一个解决方案，它不需要将页脚放置在主 Package 器元素之外，这是大多数人构建页面的方式。

html,
body {
  margin: 0;
  height: 100%;
}

.wrapper {
  box-sizing: border-box;
  position: relative;
  padding-bottom: 1em; /* Height of footer */
  min-height: 100%;
}

header {
  background-color: #cff;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: #000;
}

个字符

说明

Package 元素将填充100%的视口高度。（如果不想设置html和body元素的高度，也可以使用100vh作为 Package 器。） Package 器还有一个底部填充，用于为页脚创建占位符。
页脚绝对位于 Package 器的底部，并位于由 Package 器的底部填充创建的占位符中。
这意味着当页面没有滚动条时，页脚将位于最底部。但是，当有足够的内容显示滚动条时，页脚将被向下推到内容下方。
(The显然，示例中的color和background-color CSS属性仅用于装饰。它们被包括在内，这样当您运行代码时，您就可以清楚地看到分开的部分。）

赞(0）回复(0）举报 2023-08-08

7cwmlq894#

Steve Hatcher的Sticky Footer Solution

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

字符串

赞(0）回复(0）举报 2023-08-08

sc4hvdpw5#

如果您不知道页脚的大小，另一种方法是使用JavaScript和CSS

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

#footer{
    background-color: #292c2f !important;
    position:absolute;bottom:0px;
}

字符串
JavaScript部分

$(document).ready(function(){
        if ($(document).height() > $(window).height()) {
            $('#footer').css('position', 'relative');
        }
});

型
您可以通过另一种方法轻松地做到这一点，方法是在页脚标记之前的标记上设置min-height。

.the-tag-before-footer{
     min-height:30%;
 }

型

赞(0）回复(0）举报 2023-08-08

tyky79it6#

我尝试了很多方法，但结果是不同的，当页面完全填充或没有。最简单有效的解决方案是使用flex。

html, body {height: 100%;}
body {display: flex; flex-direction: column;}
.content {flex: 1 0 auto; padding: 20px;}
.footer {flex-shrink: 0; padding: 20px;}

个字符
来源：CSS Trick

赞(0）回复(0）举报 2023-08-08

jtoj6r0c7#

首先将所有的主要内容 Package 在一个div元素中，并给予它一个“wrapper”类（或者随便你怎么称呼它）。
超文本标记语言：

<body>
    <div class="wrapper">
        <h1>Main Content</h1>
    </div>
    <footer>
        <p>Footer Content</p>
    </footer>
</body>

字符串
现在，确保你给予你的页脚一个高度。
然后使用calc（）函数将 Package 器的高度设置为视口（显示）的高度减去页脚的高度。

.wrapper {
    min-height: calc(100vh - 50px);
}
footer {
    height: 50px;
}

型
现在，如果你的 Package 器内容上有额外的边距，你将不得不增加从视口高度中减去的像素数量来反映这一点。除此之外，这是一个超级容易和快速修复。不需要JavaScript，只需要两个CSS规则。

赞(0）回复(0）举报 2023-08-08

c86crjj08#

对于任何使用Bootstrap 4或更高版本的人来说，这个问题很容易解决，只需在您的网站上包含以下片段：

<script>
     $(document).ready(function(){
         if ($('body').height() < $(window).height()) {
            $('footer').addClass('position-absolute bottom-0');
         } else {
            $('footer').addClass('position-static');
         }
     });
</script>

字符串
在这里，我们检查BODY标签的高度是否小于浏览器窗口的高度，如果是，我们将页脚放置在页面的底部，如果是，我们将页脚设置为静态，它将保持在原来的位置。你不需要改变你当前的代码，你只需要在你的页面或包中包含这个JavaScript，记住要工作，<body>标签必须有位置：如果你没有在CSS <body>中更改标签的“position”属性，你不需要做任何事情，因为它是默认值。

确保在jquery之后包含代码，没有jquery它将无法工作。
如果您没有使用<footer>标记，则应该适当地更改$('footer')选择器。

赞(0）回复(0）举报 2023-08-08

bihw5rsg9#

对我来说，它没有工作，直到我删除了position: absolute

.footer {
    // position: absolute; // removed 
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

html, body {height: 100%;}

字符串
请注意，<footer />元素位于<body>

赞(0）回复(0）举报 2023-08-08

我来回答

css 在内容很少的页面上强制页脚在底部

9条答案

HTML

CSS

更新2021 - CSS GRID

旧答案

相关问题

热门标签

最新问答