1

经过几个小时的设计大战，我来找你帮忙。如您所见，我正在为夜总会建立一个网站。 网站预览

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

预期行为：

在此处输入图像描述

附加事实 - 彩色边框仅用于调试 porpuses

4

2 回答 2

5

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

最重要的是标签从htmldown到的路径#body-container都必须有height: 100%。

见http://jsfiddle.net/NQHjc/

编辑

根据评论，我添加了

position:relative;
top:50px;

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

于 2012-11-10T03:49:34.023 回答
0

如果你不介意有黄色边框，你可以这样做

为新元素添加一些 CSS。

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

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

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

请注意，我放置了 1250px 的高度，因为我没有您图片的高度。但是玩高度，因为我不知道你的图片/元素的确切高度。

我会在 JS 中添加类似的东西

    window.onload = function(){
        var whiteBox = document.getElementById("whiteBox");
        whiteBox.style.height = window.innerHeight/100 * 80 + "px";
    }
于 2012-11-10T04:48:06.410 回答