html - 堆叠的 元素与上部 的底部边框创建分离

Question

我的目标是让我的页面看起来像下图一样。我希望顶部(白色)占页面高度的 75%，而剩余空间由绿色填充。我想使用鞋面的底部边框(灰色)来创建分隔。我遇到的问题是底部边框没有显示出来。知道我做错了什么吗？谢谢

body {
  background-color: #FFFFFF;
  font-family: Verdana, Arial, helvetica, sans-serif;
  font-size: 20px;
  height: 100%;
  width: 100%;
}
.top,
.bottom {
  position: fixed;
  left: 0;
  right: 0;
}
.top {
  background-color: #FFFFFF;
  border-bottom-style: solid;
  border-bottom-color: #C4C2C2;
  border-bottom-width: 3px;
  top: 0;
  height: 75%;
  padding: 10px;
  padding-left: 15px;
}
.bottom {
  background-color: #66BC29;
  bottom: 0;
  height: 25%;
  padding-right: 35px;
  padding-left: 10px;
}

<div class="top">
</div>
<div class="bottom">
</div>

Answer 1

底部边框被底部 div 覆盖。将 z-index 添加到您的顶级样式:

.top { 
    ...
    z-index: 1;
}

Fiddle