填充父容器

Question

填充父容器

经过几个小时的设计战,我来找你一只手.我正在建立一个夜总会的网站,你可以看到. wbesite预览

我无法将居中区域(以黄色为边界)拉伸到页脚开始的页面底部(页脚是绿色顶部边框div).发生这种情况是因为内容不足以填补其余的高度.

这是我的CSS

html, body{
    height: 100%;
    margin: 0 auto;
}

#container{
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* as #footer height */
    min-height: 100%;
    text-align: center; 
    border: 5px solid blue;
}

#centered-container{
    width: 950px;
    margin: 0 auto;
    text-align: left;
    border: 5px solid yellow; 

}

#body-container{  
    border: 5px solid red; 
}

#footer, .footer{
    height: 50px;
}

#footer{
    text-align: center;
    border-top: 5px solid green;
}

Run Code Online (Sandbox Code Playgroud)

这是我的HTML标记

<body>
    <div id="container"> <!-- BLUE BORDER -->
        <div id="centered-container"> <!-- YELLOW BORDER -->
            <div id="body-container"> <!-- RED BORDER -->
            </div>
        </div>
        <div class="footer"></div> <!-- GREEN BORDER -->
    </div>
    <div id="footer"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

预期行为:

在此输入图像描述