How to implement a fixed footer layout using HTML and CSS-HTML Tutorial-php.cn

How to implement a fixed footer layout using HTML and CSS

WBOY

Release： 2023-10-20 13:28:43

Original

1508 people have browsed it

How to implement a fixed footer layout using HTML and CSS

How to use HTML and CSS to implement a fixed footer layout

In website design, a common requirement is to implement a fixed footer layout, that is, regardless of the content of the web page However, the footer always appears at the bottom of the page. This article will introduce how to implement such a layout using HTML and CSS, and provide specific code examples.

To implement a fixed footer layout, we need to use CSS positioning properties to control the position of the footer and set the minimum height of the page to ensure that the footer can still remain at the bottom when the content exceeds the height of the page.

The following is an example of using HTML and CSS to implement a fixed footer layout:

<!DOCTYPE html>
<html>
<head>
    <title>固定页脚布局示例</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .content {
            min-height: 100%;
            margin-bottom: -50px; /* 页脚的高度 */
        }

        .footer {
            height: 50px;
            background-color: #f5f5f5;
            position: relative;
            clear: both;
        }

        .footer-inner {
            margin: 0 auto;
            max-width: 960px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 网页内容 -->
    </div>

    <footer class="footer">
        <div class="footer-inner">
            <!-- 页脚内容 -->
        </div>
    </footer>
</body>
</html>

Copy after login

In the above code, we use a .content div element to Wrap web content. By setting min-height: 100%;, the height of .content is always at least as high as the height of the browser window. Then, we set the margin-bottom of .content to the negative value of the height of the footer to offset the impact of the footer on the content.

Next, we define a .footer class as the footer style. We set the element's height to the actual height of the footer, background-color to the background color, position: relative; to relative positioning, and clear it The floating element after.

Inside .footer, we use a .footer-inner div element to center align the footer content. We set the element's margin: 0 auto; to center it horizontally, max-width: 960px; to specify the maximum width, and padding: 10px; to set it. Padding.

Through the above HTML and CSS code, we implement a fixed footer layout. The footer always appears at the bottom of the page, no matter how much content there is.

Summary:

Using HTML and CSS, you can implement a fixed footer layout and ensure that the footer is always displayed at the bottom of the page. We can easily implement such a layout by setting a minimum height for the content and using positioning properties to control the footer's position. Hope this article can be helpful to you.

The above is the detailed content of How to implement a fixed footer layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!