Shulou(Shulou.com)06/02 Report--

This article mainly explains the "css how to let div display at the bottom of the page", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css how to let div display at the bottom of the page" bar!

The method of div display at the bottom of the page: 1, add the "position:fixed;" style to the div element, and set it to a fixed positioning style; 2, add the "bottom:0;" style to the div element, and set the distance between the div element and the bottom to 0, that is, the div is displayed at the bottom of the page.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How css makes div display at the bottom of the page

In css, the position attribute is mainly used to set the position of the div. If you want to achieve the div bottom display, you need to set the position property of the div to fixed (absolute positioning), and set the bottom attribute to 0 to achieve the bottom display.

Examples are as follows:

1. Create a new html file, named test.html, to explain how css lets div display at the bottom. Create a module using the div tag and set its class property to mydiv, which is mainly used below to set the css style through this class. Write a tag, and the css style of the page will be written in the tag.

2, within the css tag, set the style to div through the mydiv class name, use width to set the width of div to 150px, use height to set the height of div to 150px, use background to set div background color to red, and use color to set text color to white. Use position to set the location of the div, here because in order for the div to be displayed at the bottom, it needs to be set to fixed (absolute positioning).

Within the css tag, set the div distance from the left side of the page to 0px through left, and set it to 0 through bottom, so that div is fixed at the bottom of the page.

3. Open the test.html file in the browser to see the effect of the implementation.

Thank you for reading, the above is the content of "how css makes div display at the bottom of the page". After the study of this article, I believe you have a deeper understanding of how css makes div display at the bottom of the page, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.