任何标签的100%是相对于父亲节点而言的，如果需要根据窗口高度自适应，我们需要设置html和body为100%
直接body下的层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> html,body{height:100%;padding:0;margin:0;} .inner{overflow: hidden;background: #ddd;overflow: hidden;height: 100%;} </style> </head> <body> <div class="inner">我是内容</div> </body> </html>
有其他父层的层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> html,body{height:100%;padding:0;margin:0;} .main{height: 100%;overflow: hidden;} .inner{overflow: hidden;background: #ddd;overflow: hidden;height: 100%;} </style> </head> <body> <div class="main"> <div class="inner">我是内容</div> </div> </body> </html>