Question

我正在制作一个在线浏览器游戏的成就列表用户脚本，并且对我的菜单行为感到困惑。我有我的主要背景div，其中有3 divs：高度为10％的标题，高度为80％的标题，高度为10％的页脚。由于我没有任何余量，我希望页脚的底部到达背景底部，但由于某种原因，它会向下移动。

以下是使用chrome dev工具的一些图片：

如图所示，页脚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);

Div高度总和100％，延伸超过容器div

0 个答案: