Html 填充父容器_Html_Css_Parent Child

Html 填充父容器

html css

Html 填充父容器,html,css,parent-child,Html,Css,Parent Child,经过几个小时的设计大战，我来找你帮忙。正如你所看到的，我正在为一家夜总会建立一个网站。我无法将居中区域（以黄色为边框）拉伸到页脚开始的页面底部（页脚是绿色顶部带边框的div）。发生这种情况是因为内容不足以填满其余的高度这是我的css html, body{ height: 100%; margin: 0 auto; } #container{ height: auto !important; height: 100%; margin: 0 auto

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

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

取出高度：自动！重要的在

#容器中

。增加

高度：100%#居中容器

和#车身容器
中进行编码。您可以稍微更改边距，使其更适合
最重要的是，从html
到#body container
的标记路径必须具有高度：100%

看
编辑
根据评论，我补充道
position:relative;
top:50px;

至#页脚
。看见请注意，如果文本溢出div，它将有滚动条（使用此方法，它几乎是必需的）。
取出高度：auto！重要的在#容器中
。增加高度：100%#居中容器
和#车身容器
中进行编码。您可以稍微更改边距，使其更适合
最重要的是，从html
到#body container
的标记路径必须具有高度：100%

看
编辑
根据评论，我补充道
position:relative;
top:50px;

至#页脚
。看见请注意，如果文本溢出div，它将有滚动条（使用此方法，这是非常必要的）。
如果您不介意使用黄色边框，可以这样做
为新元素添加一些CSS
#whiteBox{
    width:100%;
    height:1250px;
}

并在红色边框之间添加新元素
    <div id="body-container"> <!-- RED BORDER -->
            <div id="whiteBox"></div>
    </div>

如果你不介意黄色边框，你可以这样做
为新元素添加一些CSS
#whiteBox{
    width:100%;
    height:1250px;
}

并在红色边框之间添加新元素
    <div id="body-container"> <!-- RED BORDER -->
            <div id="whiteBox"></div>
    </div>

您正在将容器中的高度设置为auto
和100%
。你不应该删除auto
属性来获得这种行为吗？我这样做了，看起来没有什么区别。为什么你不给你的中心容器增加一个更大的高度？@ManuelChoucino，因为这不会拉伸内容所在的元素（白色区域）@manix你能用图片显示你想要达到的效果吗？抱歉，我是一个视觉者：）您正在将容器中的高度设置为auto
和100%
。你不应该删除auto
属性来获得这种行为吗？我这样做了，看起来没有什么区别。为什么你不给你的中心容器增加一个更大的高度？@ManuelChoucino，因为这不会拉伸内容所在的元素（白色区域）@manix你能用图片显示你想要达到的效果吗？抱歉，但我是一个视觉：）在我的浏览器（谷歌浏览器）中，内容超出了页脚相当多，在你的小提琴。是的，我已经在网上测试了代码，因为@Codemonkey saysI以前做过这个把戏，但它会将页脚移动到“可见”下，然后出现垂直滚动条。。。所有这些我都称之为“1000天之战”，我提到的滚动条不应该出现在页脚，而是出现在内容部分。我想你说的是另一个我没有看到的滚动条。nhaaaaa我们这么做是因为我们喜欢它：）在我的浏览器（谷歌浏览器）中，内容在你的小提琴中超出了页脚。是的，我已经在网站上测试了这个代码，@Codemonkey说我以前做过这个把戏，但是它会将页脚移动到visible下面，然后出现垂直滚动条。。。所有这些我都称之为“1000天之战”，我提到的滚动条不应该出现在页脚，而应该出现在内容部分。我想你说的是另一个我没有看到的滚动条。nhaaaaa我们这样做是因为我们喜欢它：）嗯，固定高度的想法不好，因为屏幕分辨率可以改变，你可以使用一些JS来组合你想要的高度。这也是一个选项：）现在我要让它工作了。非常感谢你！嗯，固定高度的想法并不好，因为屏幕分辨率可以改变。你可以使用一些JS来组合你想要的高度。这也是一个建议：）现在我要让它工作。非常感谢你！