css 页脚浮动在底部_如何使用CSS在网页底部设置粘性页脚？

最新推荐文章于 2023-12-11 21:40:08 发布

「已注销」

最新推荐文章于 2023-12-11 21:40:08 发布

阅读量633

点赞数

文章标签： css html java web python

原文链接：https://www.includehelp.com/code-snippets/how-to-set-the-sticky-footer-at-the-bottom-of-a-webpage-using-css.aspx

版权

css 页脚浮动在底部

Introduction:

介绍：

We know various things regarding web development, don't we? But do we know it all? The answer might be no. That is nothing to feel embarrassed about as it is just natural that one cannot know everything, moreover when you are just a beginner. Therefore, one must keep learning as much as one can. Learning various properties would help you grow as a web developer exponentially. A good and professional developer is the one who keeps on learning new things and implement those learnings in the development of websites or web pages. So if you aim to be a good developer never stop learning new methods, properties, functions, etc. Thus, on that note let us learn something new in this article and that is setting the footer at the bottom of the website or web page.

我们了解有关Web开发的各种知识，不是吗？但是我们知道全部吗？答案可能是否定的。没什么好尴尬的，因为很自然，一个人什么都不知道，而且当您只是一个初学者时。因此，一个人必须不断学习。学习各种属性可以帮助您以Web开发人员的身份成倍增长。一个优秀而专业的开发人员是不断学习新事物并在网站或网页开发中实施这些学习的人。因此，如果您希望成为一名优秀的开发人员，请不要停止学习新的方法，属性，函数等。因此，在此笔记上，让我们学习本文中的新内容，这将使页脚位于网站或网页的底部。

The footer in CSS can stick at the bottom of the webpage in the same manner that the navigation bar sticks on the top of the page. It's always there on the bottom of the page, no matter how much you scroll down the webpage? It is always visible on every page. Not just that, it is a good practice to include footers in the websites or web pages. It makes your website or web page appear to be very professional and organized. Normally the website footer is useful to add additional information and navigation options at the end of the web page.

CSS中的页脚可以按照导航栏粘贴在页面顶部的方式粘贴在网页底部。 无论您向下滚动多少页面，它始终位于页面底部。它始终在每个页面上可见。不仅如此，在网站或网页中包含页脚也是一个好习惯。它使您的网站或网页看起来非常专业且井井有条。通常，网站页脚可用于在网页末尾添加其他信息和导航选项。

So, let us continue this discussion of setting the footers at the bottom of the webpage.

因此，让我们继续进行有关在页面底部设置页脚的讨论。

Solution:

解：

To create a footer to stay at the bottom of a web page in CSS all you need to do is set the position to fixed, so that the footer is fixed at one position even if you scroll the web page and set the bottom to 0 so it is fixed at the bottom of the web page exactly how we wanted.

要在CSS中创建页脚以保留在网页底部，您需要做的就是将位置设置为fixed ，以便即使滚动网页并将底部设置为0，页脚也固定在一个位置。它完全按照我们的意愿固定在网页底部。

Syntax:

句法：

element{
	position:fixed;
	bottom:0; // other CSS properties
}

Example:

例：

<html>

<head>
    <style>
        iframe {
            height: 300px;
            width: 900px;
            background-color: blue;
        }
        
        .footer {
            position: fixed;
            padding: 10px 10px 0px 10px;
            bottom: 0;
            width: 100%;
            height: 30px;
            font-size: 20px;
            background: #f40;
            color: #fff;
            text-align: center;
        }
    </style>

    <head>

        <body>
            <h1>IncludeHelp</h1>
            <iframe src="https://www.includehelp.com/" frameBorder="0"></iframe>
            <div class="footer">This is IncludeHelp</div>
        </body>
        <html>

Output

输出量

CSS | How to fix the fotter at bottom in a webpage

In the above example, the colored DIV that contains "This is IncludeHelp" is at the footer which is at the bottom of the page.

在上面的示例中，包含“ This is IncludeHelp”的彩色DIV位于页面底部的页脚中。

Words of advice:

忠告：

That was easy, right? The most important thing in setting the footer is what you want to include in your footer. As you do not want anything redundant to be displayed on the footer, so it is very crucial what you decide as a footer.

那很容易，对吧？设置页脚中最重要的是要包含在页脚中的内容。由于您不希望在页脚上显示任何多余的内容，因此决定作为页脚至关重要。

翻译自: https://www.includehelp.com/code-snippets/how-to-set-the-sticky-footer-at-the-bottom-of-a-webpage-using-css.aspx

css 页脚浮动在底部

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 页脚浮动在底部_如何使用CSS在网页底部设置粘性页脚？

css 页脚浮动在底部Introduction: 介绍： We know various things regarding web development, don't we? But do we know it all? The answer might be no. That is nothing to feel embarrassed about as it is just natura...
复制链接

扫一扫