如何使用CSS使div height扩展其内容?

2021年3月29日18:39:07 发表评论 1,003 次浏览

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 >

输出如下

如何使用CSS使div height扩展其内容?1

范例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扩展其内容?2

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: