页面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" /> <title>div布局要点</title> <script src="./qrcodejs/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style> *{ margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="header" style="width:100%; background-color: #333333; float:left; position: relative;"> <div id="left" style="width:70%; background-color:yellow; float:left;word-wrap:break-word;word-break:break-all;"> 头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div头部左边div </div> <div style="clear:both;visibility:hidden;display:none"></div> <div id="right" style="width:30%; background-color:green; float:right; position: absolute; top: 0; bottom: 0; right: 0;"> <table style="height:100%; width:100%;table-layout:fixed;"> <tbody> <tr> <td style="word-wrap:break-word; vertical-align: center; text-align: right;"> 头部右边div头部右边div头部右边div头部右边div</td> </tr> </tbody> </table> </div> </div> <div style="clear:both;visibility:hidden;display:none"></div> <div id="content" style="width:100%; background-color: red; float:left;word-wrap:break-word;word-break:break-all;text-align: left;"> 主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div主体内容div </div> <div style="clear:both;visibility:hidden;display:none"></div> <div id="footer" style="width:100%; background-color: #989898; float:left;word-wrap:break-word;word-break:break-all;text-align: center;"> 页脚页脚页脚页脚页脚页脚页脚 </div> </div> </body> </html>
页面效果：
