css怎么让高度自适应屏幕高度?

在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度。下面我们来看一下css设置高度自适应屏幕高度的方法。

首先,我们刚开始设计某些网页板块时,总会给其一个height高度值,让它刚好适合内容大小。

示例:

<!DOCTYPE html> 

<html> 

<head>     

<meta charset="UTF-8">     

<title>Title</title> 

</head> 

<style type="text/css">     

.con{

         height: 100px;         

         width: 400px;         

         background-color: #9fcdff;         

         color: black;     

     } 

     </style> 

     <body> 

     <div>     

     <p>易知道|edz.cc</p>     

     <p>易知道|edz.cc</p>     

     <p>易知道|edz.cc</p>

   </div> 

 </body>

</html>

效果图:

给其一个height高度值这种方法在你增加内容时,就会出现下面这种情况:

这就是所谓的高度不适应,也就是css高度无法根据内容实现自适应,那我们如何来实现css高度根据内容自适应呢

其实很简单,这里我们只需要把height属性去掉,给它一个padding-bottom的值。那么,css高度就会根据内容来实现自适应。

padding-bottom属性设置元素的下内边距(底部空白)。

我们来看一下具体的高度自适应实现代码:

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>Title</title></head>
  <style type="text/css">
  .con{
         padding-bottom:1cm;         
         width: 400px;         
         background-color: red;         
         color: black;     
     } 
  </style>
  
  <body>
    <div>
      <p>易知道|edz.cc</p>
      <p>易知道|edz.cc</p>
      <p>易知道|edz.cc</p>
    </div>
  </body>

</html>

效果图:

以上就是css怎么让高度自适应屏幕高度?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读