想让div填满页面剩余空间,最简易的方式还是靠提前的布局。
这里提供两种方法:
(1)利用 height 样式的%比例设置布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } html,body,#page{ height: 100%; width: 100%; } </style> </head> <body> <div id="page"> <div style="height: 20%; background:silver"></div> <div style="height: 80%; background:gray"></div> </div> </body> </html>
(2)利用 table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } html,body,#page{ height: 100%; width: 100%; } #tdcontent { height: 100%; background: silver; } #content { overflow: auto; /* or overflow: hidden; */ } </style> </head> <body> <table id="page"> <tr> <td id="tdheader"> <div id="header">header</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">content</div> </td> </tr> </table> </body> </html>
原文地址:https://www.cnblogs.com/zhcBlog/p/10494484.html
时间: 2024-10-09 04:01:38