css - 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 - 这是故意的吗？ (= 没有跨越整个宽度？)。您的 fiddle 看起来与您发布的屏幕截图完全不同......

试着让它的 position: absolute 和 bottom: 0px;，并给父元素 (#main-wrapper) position: relative ，还有一个与 #banner 一样高的 margin-bottom，它可以防止内容被 #banner 隐藏。

(已编辑，父元素名称错误)