html div的高,HTML div高度大于预期

我正在尝试再次刷新我的HTML和CSS，我试图做一个简单的布局。这是我的简单网站的HTML / CSS。

My website

* {

padding: 0px;

margin: 0px

}

html, body {

margin:0;

padding:0;

height:100%;

border: 0px;

}

#TopBar {

width:100%;

height:15%;

border-bottom:5px solid;

border-color:#B30000;

}

#MidBar {

background-color:black;

height:70%;

width:70%;

margin-left:auto;

margin-right:auto;

}

#BottomBar {

position:absolute;

bottom:0;

width:100%;

height:15%;

border-top:5px solid;

border-color:#B30000;

}

h1 {

font-family: sans-serif;

font-size: 24pt;

}

#HEADER {

text-align:center;

}

li {

display:inline;

}

#copyright {

text-align: center;

}

My website

• About me
• Contact me
• My blog
• My portfolio

test

Name here ©

鉴于我已经应用于我的div元素的高度，我预计一切都很好地排列但是看起来底部div高于预期的15％并重叠到中间div上，请参见此处由红色边框表示底部...

我哪里错了？我确信这很简单。