Question

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

我无法将居中区域（以黄色为边框）拉伸到页脚开始的页面底部（页脚是绿色顶部边框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;
}

这是我的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>

预期行为：

enter image description here

其他事实 - 彩色边框仅用于调试porpuses

Answer 1

取出height: auto !important;中的#container。在height: 100%;和#centered-container中添加#body-container。您可以稍微更改边距以使其更适合。

最重要的是，从html到#body-container的标记路径都必须height: 100%。

请参阅http://jsfiddle.net/NQHjc/

修改

根据评论，我添加了

position:relative; top:50px;

到#footer。见http://jsfiddle.net/NQHjc/3/。请注意，如果文本溢出div，它将有滚动条（使用此方法，它几乎是必需的。）

Answer 2

如果您不介意使用黄色边框，则可以执行此操作

为新元素添加一些CSS。

#whiteBox{
    width:100%;
    height:1250px;
}

在红色边框之间添加新元素

    <div id="body-container"> <!-- RED BORDER -->
            <div id="whiteBox"></div>
    </div>

请注意，我的高度为1250像素，因为我没有图片的高度。但玩高度，因为我不知道你的pic /元素的确切高度。

我会在JS中添加类似的内容

    window.onload = function(){
        var whiteBox = document.getElementById("whiteBox");
        whiteBox.style.height = window.innerHeight/100 * 80 + "px";
    }

填充父容器

2 个答案: