堆叠的<div>元素，底部边框为<div>，创建分隔

Question

我的目标是让我的页面看起来如下图所示。我希望顶部（白色）填充页面高度的75％，而剩余空间用绿色填充。我想到使用鞋帮的底部边框（灰色）来创造一个分离。我遇到的问题是底部边框没有出现。我有什么想法我做错了吗？感谢

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

底部边框由底部div覆盖。在您的顶级样式中添加z-index：

bind()

Fiddle

Answer 2

尝试添加.bottom { border-top: 5px solid #ccc; }这将起作用

Answer 3

从position: fixed移除.top, .bottom { }，您的边框将正确呈现，但这会产生其他需要解决的问题，方法是删除margin和padding <{1}}元素默认具有。

Answer 4

map与底部div重叠，因此将其删除并使用 border-bottom到底部div给你相同的结果。谢谢

＆＃13;

＆＃13;

border-top

＆＃13;

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; 
        top: 0;
        height: 75%;
        padding: 10px;
        padding-left: 15px;
    }
    .bottom { 
        background-color: #66BC29;
        bottom: 0;
        height: 25%;
        padding-right: 35px;
        padding-left: 10px;
        border-top:4px solid #C4C2C2;
    }

＆＃13;

＆＃13;

＆＃13;