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

This article mainly introduces the relevant knowledge of "how to set div adaptive height of css". Xiaobian shows you the operation process through actual cases. The operation method is simple and fast, and the practicability is strong. I hope this article "how to set div adaptive height of css" can help you solve the problem.

1. A certain minimum height, adaptive height when content is increased, and DIV has a certain minimum height when content is less-TOP

There is a DIV box, the default height is 200px, when the DIV content is redundant and exceeds the limit height,DIV adaptive height, requires pure CSS+DIV, does not require JS, compatible with Firefox browser

Answer and explanation:

_height:200px; /* css Note: Only IE6 set this property, assuming that the minimum height is 200 px, set the height of 200 px, IE6 will automatically expand after the content exceeds Set height */ min-height:200px; /* css Note: css Minimum height is 200px Support all browsers, except IE6 browser */

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

2. Specific setting code:

div{ _height:200px; min-height:200px /* css Note: The two placements are placed in no order, compatible with all browsers */ }

3. CSS minimum height and adaptive height coexist case

We set 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 more than the height can be loaded, the DIV box is adaptive to the height. For easy 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 Comments: Set minimum height, border border, width */

HTML snippet:

200 height can accommodate this content, set the minimum height of 200px, set the minimum height of 200px and more content, exceed the height limit of 200px, DIV adaptive height Case Occupancy Case Occupancy

4. Screenshot of case in browser

II. CSS default adaptive height

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

About "css how to set div adaptive height" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

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.