父母div与绝对定位的孩子divs拒绝100％身高

我想要一个100％高度div与绝对定位的divs里面。无论什么原因，当我添加子div时，父div的高度收缩为静态内容大小。父母div与绝对定位的孩子divs拒绝100％身高

为了澄清，我做了而不是希望绝对定位的元素是全高。只是包含div。

我已（简化的）的标记如下：

<div id="content"> 
    <div id="dashboard"> 
     Some text 
     <div class="widget"></div> 
     <div class="widget"></div> 
     ... 
    </div> 
</div>

而且造型：

#content { 
    min-height: 100%; 
} 
#dashboard { 
    min-height: 100%; 
    height: 100%; 
    position: relative; 
} 
.widget { 
    height: 50px; /* arbitrary */ 
    width: 50px; 
    position: absolute; 
}

我已经把#content和#dashboard作为最小高度为100％和高度100％，而工作。如果我将绝对定位的div评论出来，两者都是屏幕的整个高度。

但是，当我添加.widget s，#content仍然是全高（好），但#dashboard只成为'一些文本'的高度。无论出于何种原因，将绝对定位的内容添加到#dashboard会改变其高度。

注（编辑）

我不想#content是100％的高度，因为它需要与其他网页内容增长。我只有希望#dashboard完全是100％高度。

jQuery的工作，但我想用CSS只有我试图改变显示阻止或内嵌的类型#content和设置-moz-盒大小来

$("#dashboard").height($("#content").height());

而且做因为我读了它可以打破Firefox的最小高度。

任何想法如何解决这个问题？

相似但不相同的：How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

来源

2012-10-17 AJcodez

从MDN：

为min-height属性的百分比值与相对于所生成的框的包含块的高度计算。如果未指定包含块的height明确（即，它取决于内容高度），并且该元素未被绝对定位，则百分比值被视为。

因此，你需要指定#content元素的height明确获得属性元素的#dashboardmin-height工作。

因此，尝试使用height财产#content而不是min-height：

#content { 
    height: 100%; 
}

这里是一个jsDiddle Demo。

html, body { 
    height: 100%; 
} 
#content { 
    height: 100%; 
} 
#dashboard { 
    min-height: 100%; 
    position: relative; 
} 
.widget { 
    height: 50px; /* arbitrary */ 
    width: 50px; 
    position: absolute; 
}

<div id="content"> 
    <div id="dashboard"> 
     Some text 
     <div class="widget"></div> 
     <div class="widget"></div> 
     ... 
    </div> 
</div>

UPDATE

我不想#content是全尺寸的时刻。

然后，你需要使用一个固定的高度为#content：

#content { 
    height: 200px; /* or whatever you want */ 
} 

#dashboard { 
    height: 100%; /* or inherit */; 
}

否则，你应该使用JavaScript来计算所需的高度并应用到#dashboard元素。

来源

2012-10-17 21:27:16

+1这工作在我的小提琴：http://jsfiddle.net/kboucher/4zwyW/ –

我不希望＃内容在任何时候都是全尺寸。我希望它在其他页面上无限延伸... – AJcodez

那么，为什么你使用'min-height'？然而，你可以使用任何你想要的百分比或像素。 –

绝对定位元件的布局的不再一部分。父元素不知道有多大的子项。

您需要手动设置父级的高度，或者使用JS来计算子元素的大小并相应地应用。

此外，100％的高度的元件需要他们的父元素是100％的高度，以及：

body, html { height:100% }

来源

2012-10-17 21:23:01

父（#dashboard）高度指定为100％ –

＃内容也应该是 –

编辑问题 – AJcodez

绝对元素被取出的流动。如果他们没有流量，他们不会将高度添加到他们的父母身上。

来源

2012-10-17 21:25:52 JimmyRare

父（'＃dashboard'）高度指定为100％ –

是的，我知道。你为什么拒绝投票？ http://jsfiddle.net/2rwk9/ – JimmyRare

因为OP似乎没有意识到绝对定位将元素排除在流程之外。（也就是说，这不是问题） –

当你想拥有100％的最小高度（最小100％，扩张时有更多的内容）的＃内容，使用最小高度加上height: auto：

body, html { 
    height: 100%; 
} 
#content { 
    min-height: 100%; 
    height: auto; 
}

此外，如果我正确理解您的问题，您可以简单地将position: absolute与top: 0; right: 0; bottom: 0; left: 0;一起使用，以使#dashboard的高度完全为100％。如果＃dashboard的高度应与#content相关，请将position: relative添加到#content。

来源

2012-10-17 22:39:12

不完全，＃内容浮动，并在另一个div下。感谢'auto'提示！ – AJcodez

父母div与绝对定位的孩子divs拒绝100％身高

回答

相关问题