div页面布局基本布局知识

页面代码：

<!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>

页面效果：