如何使浮动div其父的100％的高度？ [英] How to make a floated div 100% height of its parent?

问题描述

这里是HTML：

 < div id =outer> 
< div id =inner>< / div> 
 Test 
< / div> 
  

这里是CSS：

  #inner {
 float：left; 
 height：100％; 
} 
  

使用Chrome开发者工具检查时，内部div的高度

如何强制它为父div的100％高度？

解决方案

#outer height基于其内容，并且具有 #inner 根据它的高度，使两个元素绝对定位。

更多细节可以在规格中找到 css height property ，but essentially， #inner 必须忽略 #outer height如果 #outer 的高度为 auto ，除非 #outer 绝对位置。然后 #inner height将为0，除非 #inner / p>

 < style> 
 #outer {
 position：absolute; 
 height：auto; width：200px; 
 border：1px solid red; 
} 
 #inner {
 position：absolute; 
 height：100％; 
 width：20px; 
 border：1px solid black; 
} 
< / style> 
 
< div id ='outer'> 
< div id ='inner'> 
< / div> 
 text 
< / div>但是...通过定位 #inner   


$ b <绝对地， float 设置将被忽略，因此您需要显式选择 #inner 的宽度，并添加在 #outer 中填充以伪造我怀疑你想要的文本。例如，下面， #outer 的填充宽度为 #inner +3。方便地（因为整个点是 #inner 高度到100％），不需要在下面换行文本#inner ，所以这将看起来就像 #inner 是浮动的。

  < style> 
＃outer2 {
 padding-left：23px; 
 position：absolute; 
 height：auto; 
 width：200px; 
 border：1px solid red; 
} 
＃inner2 {
 left：0; 
 position：absolute; 
 height：100％; 
 width：20px; 
 border：1px solid black; 
} 
< / style> 
 
< div id ='outer2'> 
< div id ='inner2'> 
< / div> 
文字
< / div> 
  

我删除了我之前的答案，因为它是基于太多错误的假设。 p>


Here is the HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

And here is the CSS:

#inner {
  float: left;
  height: 100%;
}

Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.

How can I force it to be 100% of the height of the parent div?

解决方案

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer's height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there's no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

这篇关于如何使浮动div其父的100％的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！