Summary of how to use height attribute in css

CSS height refers to the corresponding p height set through CSS styles. The CSS height attribute is the word height. The width width can be set to calculate the height as a percentage, set the height as a pixel value, set the height in relative length units, etc. This attribute is supported by all major browsers. The following is a summary of how to use the height attribute.

1.Use CSS to solve the highly adaptive problem

I am very resistant to using js to solve the highly adaptive problem, because it is not easy to maintain and not natural enough, but It is not easy to use pure CSS, such as the example I am going to talk about below.

Requirements:

1. The height of this rectangle is the same as the height of the browser window, and vertical scroll bars cannot appear

2. The height of the green part is fixed, such as 50px

3. Fill the purple part with the remaining height

2.Two methods for adapting the float height of multiple divs in css

css Multiple p floats are arranged side by side, and the heights are adaptive (auto-increasing)

When using Div + CSS for three-column or two-column layout, the height of the two columns (or three columns) must be the same , it is easy to implement using Table, but it is more troublesome to use Div + CSS. According to the general practice, most of them use background image filling or JS script to make the height the same.

3.Detailed explanation of CSS methods to control the maximum width/height and minimum width/height of div

It is often used in web page production It is necessary to control the maximum width/height or minimum width/height of p width, but many friends will encounter incompatibility headaches in IE6, including me. I often encounter such problems. I searched a lot on Baidu and couldn't solve it. Later, I learned it on a forum and I would like to share with you the CSS3 style code. Over time, it is fully compatible with all major mainstream browsers.

4.Solution to adaptive height in DIV+CSS layout

This article uses examples to explain in detail how to use DIV +How to adapt height in CSS layout.

5.CSS controls the height of the Html page and causes jitter.

CSS controls the height of the Html page and causes jitter. This type of problem is caused by In fact, the root cause of the problem of high page jitter is whether the scroll bar is displayed or not. After testing, it can be implemented. From this it can be concluded that the root cause of this type of page jittering problem caused by height is actually caused by whether the scroll bar is displayed.

Related questions and answers about the use of height attribute:

1.

css - div adaptive height automatically fills the remaining height

2.

How to use flex to implement a three-column layout, but the height of the child elements must be adaptive?

3.

CSS3 flex How to make rows with different heights equal height?

The above is the detailed content of Summary of how to use height attribute in css. For more information, please follow other related articles on the PHP Chinese website!