How to Fix a Footer to the Bottom of a Webpage Using HTML and CSS?

Fix footer to bottom of page using HTML and CSS

The requirement of the question is to have the footer of a webpage fixed at the bottom of the page, regardless of screen size.

To solve this, we will use the position: fixed property in CSS. This property allows an element to be positioned relative to the viewport, rather than to the flow of the document. We will also set the bottom property to 0px to position the footer at the bottom of the page.

Additionally, we will need to set the height of the footer, so that it doesn't take up the entire viewport. In this example, we will set the height to 50px.

Here are the updated CSS styles for the footer:

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

To ensure that the content above the footer doesn't overlap it, we need to add some space below the main content. This can be achieved by setting the margin-bottom property of the body element to a value that is greater than or equal to the height of the footer. In this example, we will set the margin-bottom to 50px.

Here are the updated CSS styles for the body:

body {
    margin-bottom: 50px;
}

With these changes, the footer will now be fixed to the bottom of the page, regardless of the screen size.

The above is the detailed content of How to Fix a Footer to the Bottom of a Webpage Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!