0

假设我们有一个DIV这样的元素： 

<div id='parent'>
    <!-- The childs will come here -->
    <div id='footer'>This is footer</div>
</div>

这个函数动态创建 HTML 元素并将它们插入到div#parent 

function addChild(name)
{
    $("<div></div>").text(name).prependTo( $("div#parent") );
}

CSS： 

div#parent
{
    height:400px;
    background-color:yellow;
}
div#footer
{
    /* height: ??? */
    background-color:red;
}

现在我想要，元素div#footer覆盖元素的整个可用/剩余高度div#parent，我如何通过 CSS 或 Javascript 做到这一点？

谢谢

4

2 回答 2

0

另一个使用 CSS 的解决方案。这里的解决方案是使用display:table和display:table-row

div#parent
{
    display:table;
    height:400px;
    width:100%;
    background-color:yellow;
}

div{
    display:table-row;
    height:20px;
}

div#footer
{
    /* height: ??? */
    background-color:red;
    height:auto;
}

http://jsfiddle.net/aawbE/

于 2013-07-13T09:14:06.570 回答
0

如果您只是希望页脚始终位于页面底部，那么我建议您查看http://www.cssstickyfooter.com/。他们有一个很好的概念来确保页脚要么位于内容的末尾，要么触及页面底部。

例子

如果您希望页脚覆盖屏幕的整个底部（从内容结束的地方开始，到屏幕底部结束），那么您需要知道“容器”内所有元素使用的总高度" 元素以及 "container" 元素的高度。

一种简单的方法是将所有子元素放入不同的 div 中（您可以轻松跟踪其高度。

//find the difference in height between the 
//"parent" div (minimum of 100% of page height) and 
//the "main" div (the total height of its child elements)
height = document.getElementById('parent').offsetHeight -
    document.getElementById('main').offsetHeight;

//Set the top margin of footer to minus the height 
//(make footer go up 'height' number of pixels
document.getElementById('footer').style.marginTop = -height+'px';

//Set the height of the footer to 'height'
document.getElementById('footer').style.height = height+'px';

请务必注意，这些计算基于 cssStickyFooter 代码。这确保页脚的底部保持在屏幕底部（除非它通过屏幕底部）。

例子

对于这个例子，我在“主”div 周围添加了一个绿色边框，以便您可以看到它的结束位置。我还确保在重新调整页面大小时更改页脚，以防子元素四处移动（重新调整页面大小以查看这种情况）。我还在min-height页脚中添加了一个，所以即使#main.height >= #parent.height.

我希望这有帮助。

于 2013-07-13T09:50:27.520 回答