有css元素放置问题

Question

灰色元素，id为#banner的div并不意味着伸出来，我把包含欢迎的div中的所有元素包含在融合框，红色元素和横幅中，最小高度加起来它内部元素的所有最小高度（欢迎使用融合立方体，红色元素，横幅）。

基本上它并不意味着坚持下去，我只是无法弄清楚它为什么会突出。

JsFiddle

要求提高效率并不高，但我无法弄清楚它是否有压力

#main-wrapper{
    width: 80%;
    height: calc(75.5% - 10px);
    margin: 10px auto 0;


    min-height: 250px;
}
    #page-title {
        height: 7%;
        font-size: 1.8em;
        text-align: center;
        padding: 1px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        min-height: 35px;
    }
    #content-wrapper {
        background: red;
        height: 83%;

        min-height: 160px;
    }
        #page-messages {
            width: 100%;
            height: 20%;
            overflow: auto;
        }
    #banner {
        height: 10%;
        display: inline-block;
        background: grey;

    min-height: 55px;
}
footer {
    height: 8%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.5%;
    margin: 20px 0 0;
    width: 100%;
    display: block;
}    

Answer 1

您将#banner定义为inline-block - 这是意图吗？ （=不跨越整个宽度？）。你的小提琴看起来与你发布的截图完全不同......

尝试制作其position: absolute和bottom: 0px;，并将父元素（＃main-wrapper）position: relative以及margin-bottom与#banner一起提高}，阻止内容被#banner隐藏。

（已编辑，父元素名称错误）