如何使用CSS使div height扩展其内容（） _floor

height属性用于设置元素的高度。 height属性不包含元素的填充, 边距和边框。 height属性包含许多定义元素高度的值。下面列出了height属性值：
语法如下：

height: length|percentage|auto|initial|inherit;

属性值：

高度：自动；用于将height属性设置为其默认值。如果height属性设置为auto, 则浏览器将计算元素的高度。
高度：长度；用于以px, cm等形式设置元素的高度。长度不能为负数。
高度：初始；用于将height属性设置为其默认值。
高度：继承；它用于从其父元素设置height属性。

范例1：这个例子使用height：auto; 属性以显示内容。

< !DOCTYPE html> < html > < head > < !-- style to set height property to display content --> < style > p { color:white; } .main { background-color:black; height:auto; border-radius: 20px 20px 0px 0px; } .left-column { background-color:indigo; height:120px; width:49%; float:left; border-bottom-left-radius: 20px; } .right-column{ background-color:green; height:7.5em; width:49%; float:right; border-bottom-right-radius: 20px; } h1{ color:Green; } < / style > < / head > < body > < center > < h1 > lsbin< / h1 > < div class = "main" > < p > Also, any geeks can help other geeks by writing articles on the lsbin, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. < / p > < / div > < div class = "left-column" > < p > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. < / p > < / div > < div class = "right-column" > < p > The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. < / p > < / div > < / center > < / body > < / html >

输出如下

文章图片
范例2：该示例使用height：Inherited属性显示内容。

< !DOCTYPE html> < html > < head > < !-- CSS style to set height property of content --> < style > .auto { height:auto; background-color:orange; } .inherit { height:inherit; background-color:cyan; } .percentage { height:25%; } h1 { color:green; } < / style > < / head > < body style = "text-align:center; " > < h1 > lsbin< / h1 > < div class = "auto" > < p > Also, any geeks can help other geeks by writing articles on the lsbin, publishing articles follow few steps that are Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formatting style, coding style, and try to make you are close to them. < / p > < div class = "inherit" > < p > It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. < / p > < / div > < div class = "percentage" > < p > The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. < / p > < / div > < / div > < / body > < / html >

【如何使用CSS使div height扩展其内容（）】输出如下：