<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> body { margin: 0; padding: 0; } #max { width: 100vw; height: 100vh; text-align: center; color: white; font-weight: bold; } #top, #center, #footer { width: 100vw; } #top { height: 10vh; background: red; } #center, #center-left, #center-right { height: 80vh; } #footer { height: 10vh; background: blue; } #center-left { width: 20vw; background: orange; } #center-right { position: relative; width: 80vw; background: deepskyblue; top: -80vh; left: 20vw; } </style> <body> <div id="max"> <div id="top">top</div> <div id="center"> <div id="center-left">left</div> <div id="center-right">right</div> </div> <div id="footer">footer</div> </div> </body> </html>
告别了以前height不能直接用百分比的麻烦, 如果用vw，vh的话 请全局尽量都用vw，vh，如果又用这个又用百分比的话 会造成意想不到的意外(亲测)
欢迎加群:822162679