css实现满屏品字

css实现满屏品字

第一种方法:

  • 上面那块用margin: 0 auto;居中;
  • 下面两块用float或者inline-block不换行;
  • 用margin调整位置使他们居中。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>满屏品字布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            height: 100%;/*此设置非常关键,因为默认的body,HTML高度为0,所以后面设置的div的高度无法用百分比显示*/
        }       

        .header{
            height:50%; /*此步结合html,body高度为100%,解决元素相对窗口的定位问题*/
            width: 50%;     
            background: orchid;           
            margin:0 auto;
        }

        .main{
            width: 100%;
            height: 50%;
        }

        .main .left,.main .right{
            float: left;/*采用float方式,对元素进行左右定位*/
            width:50%;/*此步解决元素相对窗口的定位问题*/
            height:100%;/*此步解决元素相对窗口的定位问题*/
            background: coral;
        }
        .main .right{
            background: mediumspringgreen;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

css实现满屏品字_第1张图片

第二种方法:

  • 上面那块用margin: 0 auto;居中;
  • 下面两块用position: relative不换行;
  • 用position: absolute调整他们的位置;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>满屏品字布局</title>
    <style type="text/css">
        body{  
          height: 100%;  
      }  
      .main {  
          position: fixed;  /*此步解决元素相对窗口的定位问题*/
          left: 0;  
          top: 0;  
          height: 100%;  
          width: 100%;  
      }  
      .wrapper-up {  
          height: 50%;  
      }  

      .wrapper-down {  
          height: 50%;  
          position: relative;  
      }  
      .div-square-up {  
          width: 50%;  
          margin: 0 auto;  
		  background-color: #DA70D6;
          height: 100%;  
          box-sizing: border-box;  
      }  

      .div-square-left {  
          position: absolute;  /*此步解决元素左右定位问题*/
          left: 0;  
          width: 50%;  
          height: 100%;  
          box-sizing: border-box;  
		  background-color: #00FA9A;
      }  

      .div-square-right {  
          position: absolute;   /*此步解决元素左右定位问题*/
          right: 0;  
          width: 50%;  
          height: 100%;  
          box-sizing: border-box; 
		  background-color: #FFC0CB;
      }  
    </style>
</head>
<body>
    <div class="main">  
         <div class="wrapper-up">  
           <div class="div-square-up"></div>  
         </div>  
         <div class="wrapper-down">  
           <div class="div-square-left"></div>  
           <div class="div-square-right"></div>  
         </div>  
    </div> 
</body>
</html>

css实现满屏品字_第2张图片

你可能感兴趣的:(css)