Css 分区高度总和为100%，超过集装箱分区

我正在制作一个在线浏览器游戏的成就列表用户脚本，我对自己的菜单行为感到困惑。我有我的主要背景

div

，其中有3个

div

：页眉高10%，正文高80%，页脚高10%。因为我没有任何一个页脚的边距，所以我希望页脚的底部能够到达背景的底部，但由于某种原因，页脚正在向下移动

下面是一些使用chrome开发工具的图片：

如图所示，footer div的顶部与body div的底部不对齐。有人知道为什么会这样吗？我将添加一张通过chrome看到的CSS图片，但是如果你想要我的实际代码，请告诉我。我有3个div，他们的身高加起来是100%，但他们的身高比容器底部还要低

编辑：这是我的实际代码：

function showMenu(){                                            // Show menu when user presses home button
    var menu = document.createElement('div');
    $(menu).css({
        'height':'500px',
        'width':'400px',
        'background-color':'#00ACE9',
        'position':'absolute',
        'top':'10em',
        'left':'50%',
        'border-radius':'5%',
        'border':'3px solid black',
        'transform':'translate(-50%, 0)',
        'zIndex':'30'
    }).attr('id', 'AchieveMenu');
    var footer = document.createElement('div');
    $(footer).css({
        'margin-top':'0',
        'padding-top':'0',
        'width':'100%',
        'height':'5%',
        'position':'relative'
    });
    var footerText = document.createElement('p');
    $(footerText).text('Press on achievement to see current status').appendTo(footer).css({
        'text-align':'center',
    });
    var heading = document.createElement('h1');
    $(heading).text('Achievements').css({
        'position':'relative',
        'color':'#893667',
        'padding-top':'5px',
        'padding-bottom':'5px',
        'left':'60px',
        'display':'inline'
    });
    var seperator = document.createElement('div');    // This is header
    $(seperator).css({                  
        'width':'100%',
        'height':'10%',
        'position':'relative',
        'border-bottom':'2px solid black'
    });
    var exit = document.createElement('button');                // Hides menu button
    $(exit).html('X').click(hideMenu).css({
        'border':'solid 3px black',
        'float':'right',
        'border-radius':'100%',
        'background-color':'#c2c2d6'
    });
    var awardsDiv = document.createElement('div');              // Holds achievement table
    $(awardsDiv).css({
        'position':'relative',
        'width':'100%',
        'height':'80%',
        'overflow':'scroll',
        'margin-left':'auto',
        'margin-right':'auto',
        'border-bottom':'2px solid black'
    });
    var awards = document.createElement('table');               // Table for achievements
    var awardString = getAwards();                              // Get html for achievements table
    $(awards).css({
        'position':'relative',
        'width':'100%',
        'height':'100%',
        'border-spacing':'collapse'
    }).html(awardString);
    $(awards).find('td').css({
        'padding-top':'5px',
        'padding-left':'10px',
        'font':'15pt monospace',
        'color':'black'
    });
    $(awards).each(function(){$(this).find('tr:odd').css('background-color','#99ccff')});
    $(awards).each(function(){$(this).find('tr:even').css('background-color','#cce6ff')});
    $(awardsDiv).append(awards);
    $(seperator).append(heading, exit);
    $(menu).append(seperator, awardsDiv, footer);
    $('body').append(menu);

---

请张贴相关代码。删除

body

和

html

填充和边距。我添加了我的代码，所有代码都是使用jQuery动态添加的。[不相关]您似乎不必要地使用了太多jQuery。对不起，您能详细说明一下吗。我是初学者。要应用样式，你应该使用css。将类添加到动态元素中，但不是每个样式。请发布相关代码。删除

body

和

html

填充和边距。我添加了我的代码，所有代码都是使用jQuery动态添加的。[不相关]您似乎不必要地使用了太多jQuery。对不起，您能详细说明一下吗。我是初学者。要应用样式，你应该使用css。将类添加到动态元素中，但不是每个样式。