css上下百分比布局

CSS上下百分比布局是指页面中两个区块分别占据整个页面的相同百分比，上下排列。这种布局可以让页面看起来更加协调，对于企业宣传、电子商务等网站非常适用。下面就来详细了解一下如何实现CSS上下百分比布局。

第一步，将body和html的margin和padding都设为0。

 body, html {
    margin: 0;
    padding: 0;
  } 

第二步，使用绝对定位设置两个区块的高度。这里我们采用top和bottom都等于0的方式，表示两个区块的高度将全部填充。注意，这里需要将父元素也设置为绝对定位，以便子元素可以使用top和bottom属性。

 .container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  .top {
    position: absolute;
    top: 0;
    bottom: 50%;
    width: 100%;
  }
  .bottom {
    position: absolute;
    top: 50%;
    bottom: 0;
    width: 100%;
  } 

第三步，设置两个区块的样式，可以设置背景色和其他样式。在这里我们简单地设置了背景色。

 .top {
    background-color: #fff;
  }
  .bottom {
    background-color: #eee;
  } 

最终的HTML代码如下：

 <div class="container">
    <div class="top">
      <!-- 这里放置上面的内容 -->
    </div>
    <div class="bottom">
      <!-- 这里放置下面的内容 -->
    </div>
  </div> 

这样，我们就完成了CSS上下百分比布局的实现，在实际工作中可以根据需要对CSS进行自定义，以满足具体需求。