方式一：绝对定位
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } # aaa { height:200px; background-color: red; } # bbb { width: 100%; background-color: #0a58ca; position: absolute; top: 200px; bottom: 0px; left: 0px; } </style> </head> <body> <div id="aaa">11</div> <div id="bbb">222</div> </body> </html>
方式二
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } # aaa { height:200px; background-color: red; margin: -200px 0 0; width: 100%; } # bbb { background-color: #0a58ca; height: 100%; } </style> </head> <body> <div id="aaa">11</div> <div id="bbb">222</div> </body> </html>
方式三
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } # aaa { height:200px; background-color: red; position: absolute; left: 0; top: 0; width: 100%; } # bbb { background-color: #0a58ca; height: 100%; } </style> </head> <body> <div id="aaa">11</div> <div id="bbb">222</div> </body> </html>