calc(100% - 200px);


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .outer{
  14.             width: 100%;
  15.         }
  16.         .left{
  17.             float: left;
  18.             width: 200px;
  19.             height: 500px;
  20.             background-color: orange;
  21.         }
  22.         .main{
  23.             float: left;
  24.             width: calc(100% - 200px);
  25.             height: 500px;
  26.             background-color: yellowgreen;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="outer">
  32.         <div class="left">左侧</div>
  33.         <div class="main">中间</div>
  34.     </div>
  35. </body>
  36. </html>