首先,我们刚开始设计某些网页板块时,总会给其一个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其它相关文章!