如何使浮动div的父级100％高度？

Question

如何使浮动div的父级100％高度？

这是HTML：

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

这是CSS：

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

在使用Chrome开发人员工具进行检查后，内部div的高度为0px。

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

Answer 1

对于#outer基于其内容#inner的高度，并且基于其高度，使两个元素绝对定位。更多细节可以在css height属性的规范中找到，但基本上，如果高度为，则#inner必须忽略#outer高度，除非绝对定位。然后高度将为0，除非它本身绝对定位。#outerauto&nbsp;#outer#inner&nbsp;#inner<style> &nbsp;&nbsp;&nbsp;&nbsp;#outer&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:auto;&nbsp;width:200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#inner&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:20px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}</style><div&nbsp;id='outer'> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id='inner'> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;text</div>但是......通过#inner绝对定位，float设置将被忽略，因此您需要#inner明确选择宽度，并添加填充#outer以伪造我怀疑您想要的文本包装。例如，下面的填充#outer宽度为#inner+3。方便地（因为整个点是要达到#inner100％的高度），不需要在下面包装文本#inner，所以这看起来就像#inner是浮动的。<style> &nbsp;&nbsp;&nbsp;&nbsp;#outer2{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-left:&nbsp;23px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:auto;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#inner2{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:20px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;&nbsp; &nbsp;&nbsp;&nbsp;}</style><div&nbsp;id='outer2'> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id='inner2'> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;text</div>我删除了之前的答案，因为它基于对您的目标的错误假设。

Answer 2

实际上，只要定位了父元素，就可以将子元素的高度设置为100％。即，如果您不希望父母绝对定位。让我进一步解释一下：<style> &nbsp;&nbsp;&nbsp;&nbsp;#outer2&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding-left:&nbsp;23px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:auto;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:200px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#inner2&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:100%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:20px;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}</style><div&nbsp;id='outer2'> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id='inner2'> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>