浅谈CSS满屏品字布局中div设置height为百分比无效的问题

来源：互联网发布：windows蓝天白云壁纸编辑：程序博客网时间：2024/05/15 00:07

满屏品字布局：

<!DOCTYPE html>  <html>      <head>          <title></title>          <style>              html,body{                   margin:0;                    height:100%;                 }              #top{                  width:50%;                  height:50%; margin:0 auto;                background:red;              }              #left{                  width:50%;                  height:50%;                  float:left;                  background:blue;              }              #right{                  width:50%;                  height:50%;                  float:left;                  background:yellow;              }          </style>      </head>      <body>          <div id="top"></div>           <div id="left"></div>           <div id="right"></div>       </body>  </html>

有时候，我们需要将div的高度设置为百分比形式，以便能更好的适配各种屏幕大小，如height：60%。

问题：height：60%无效。

解决办法：添加html, body{ margin:0; height:100%; }。

1 0