How to make DIV adaptive height

When we complete the project, we will all encounter the effect of making DIV adaptive height. So today we will show you how to achieve the effect of DIV adaptive height in two situations.

The first type: the height of a certain height is adaptive when the content is too much, and the DIV has a certain minimum height when the content is small;

The second type: there is no minimum height, and the DIV is fully adaptive to the height.

The following will introduce these two situations and solutions for you

There is a certain minimum height. When the content is added, the height will be adaptive. When the content is small, the DIV has a certain minimum height - TOP

There is a DIV box with a default height of 200px. When the content in the DIV is redundant and exceeds the limited height, the DIV adapts to the height. Pure CSS+DIV is required, no JS is required, and it is compatible with Firefox browser

1. Answer and explanation:

_height:200px; /* css Note: Only IE6 sets this attribute, assuming that the minimum height is 200px, set The height is 200px. IE6 will automatically raise the set height after the content exceeds the height */

min-height:200px; /* cssNote: The minimum height of css is 200px Supports all browsers, except IE6*/

This setting is compatible with IE6, 7, 8, 9, 10, Firefox, etc.

2. Specific setting code:

div{ 
_height:200px; 
min-height:200px 
/* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ 
}

3. CSS minimum height and adaptive height coexistence case

We set up 2 DIV boxes, the minimum height is 200px. When the content is small, the minimum height of the DIV box is 200px. When the content is compared When it exceeds the height and can be accommodated, the DIV box adapts to the height. In order to facilitate observation and reference analysis, we set the width to 100px and a black 1px CSS border.

CSS code is as follows:

div{_height:200px; min-height:200px; border:1px solid #000; width:100px} 
/* css注释：设置最小高度，border边框，宽度 */ 
HTML代码片段：
200高度能装下这点内容，设置最小高度200px
 
设置最小高度200px
 
而内容多，超出200px高度限制，DIV自适应高度
 

 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位
 
案例占位 

CSS default adaptive height

When we do not set a fixed height for a DIV or do not set a CSS height style, its DIV box defaults to an adaptive height. .

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!

Related reading:

The latest JS interview questions analysis

Common methods of native js are organized

Latest JS interview question analysis

The above is the detailed content of How to make DIV adaptive height. For more information, please follow other related articles on the PHP Chinese website!