<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圣杯布局</title> <style type="text/css"> html, body { padding: 0; margin: 0; } body { min-width: 600px; font-size: 24px; } #header, #footer { width: 100%; height: 30px; line-height: 30px; background-color: #909399; text-align: center; } #footer { clear: both; } #container { margin-left: 240px; margin-right: 200px; } #container .column{ position: relative; float: left; height: 100px; } #center { width: 100%; background-color: #1890ff; } #left { width: 240px; background-color: #F56C6C; margin-left: -100%; left: -240px; } #right { width: 200px; background-color: #E6A23C; margin-right: -200px; } </style> </head> <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div> </body></html>