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

This article introduces the relevant knowledge of "how to set div height". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

How to set the height of div? The answer is simple. Use the css height style to set the div height.

We want to set the height style for div objects, which are generally divided into setting fixed height, minimum height, maximum height and adaptive height.

If the class css of a DIV object is named ".div-height", to observe the effect, we add a css border style to the div box and set the div width width to 300px.

1. Set a fixed height-TOP

1. Fixed height instance html source code

Fixed height. Div-height {border:1px solid # F00; width:300px; height:200px}

2. Screenshot of div css instance with fixed div height

If you want to set a fixed height for div, just set the css height style.

2. Div sets the minimum height

Setting the minimum height means that DIV has a minimum height state. When there is too much content and the minimum height (min-height) cannot be loaded, the DIV height will adapt to the height according to the amount of content.

1. Minimum height min-height instance code:

Minimum height. Div-height {border:1px solid # F00; width:300px; min-height:200px}

2. Screenshot of minimum height of div

3. When the content is more than 200px, it will not fit.

Minimum height is supported by IE7 and above. IE6 does not support minimum height, but css can solve the minimum height of IE6.

Third, set the maximum height for DIV

Explain the maximum height and set the maximum height, which means that the DIV can hold up to the maximum height.

Set the maximum height max-height, from the typesetting layout can not see the effect, when the content excess maximum height can hold the content to see the maximum height style effect.

1. Div sets the maximum height html code

Maximum height. Div-height {border:1px solid # F00; width:300px; max-height:200px}

DIVCSS5

DIVCSS5

DIVCSS5

DIVCSS5

DIVCSS5

DIVCSS5

Hello

2. Screenshot of effect

4. Div adaptive height

How to set the div adaptive height, we know that the adaptive height style is height:auto, yes. But if we do not set the height height style, do not use the height height style, in fact, the DIV height is adaptive. So if you want to set the height of DIV to adaptive, then it is not effective to set the height style, it is naturally adaptive height.

This is the end of "how to set div height". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.