如何使母公司的浮动度100％的高度？如何使母公司的浮动度100％的高度？(How to make a

下面是HTML：

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

这里是CSS：

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

在与Chrome开发人员工具检查，内层的div越来越0像素的高度。

我怎样才能迫使它是父div的高度的100％？

Answer 1:

对于#outer是基于它的内容高度，并有#inner基础上，它的高度，使绝对定位的两个元素。

更多的细节可以在规范的找到CSS height属性 ，但本质上， #inner必须忽略#outer高度如果#outer的高度为auto ， 除非 #outer绝对定位。 然后#inner高度为0， 除非 #inner本身是绝对定位。

<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绝对，一个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>
    text
</div>

我删除了我以前的答案，因为它是基于对你的目标太多错误的假设。

Answer 2:

父：

display: flex;

你应该加入一些前缀http://css-tricks.com/using-flexbox/

编辑：唯一的缺点是IE像往常一样，IE9不支持Flex。 http://caniuse.com/flexbox

编辑2：由于@toddsby指出，对齐项目是母公司，其默认值实际上是舒展 。 如果你想为孩子不同的值，有对齐自我财产。

编辑3：的jsfiddle： https://jsfiddle.net/bv71tms5/2/

Answer 3:

其实，只要父元素的位置，你可以在孩子的身高设定为100％。 也就是说，如果你不想让父母被绝对定位。 让我进一步解释：

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        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>

Answer 4:

只要你不必早于IE8支持Internet Explorer的版本，您可以使用display: table-cell来实现：

HTML：

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS：

.inner {
    display: table-cell;
}

这将迫使每个元素与.inner类占据其父元素的最大高度。

Answer 5:

我做了一个例子解决您的问题。

你必须做一个包装，浮起来，然后是位置绝对的股利，并给它100％的高度。

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS：

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

说明：.right DIV绝对定位。 这意味着，它的宽度和高度，以及顶部和左侧positiones将根据第一个父DIV进行中求出绝对或相对定位ONLY，如果宽度或高度属性在CSS明确声明; 如果他们不explicty声明，这些属性会根据父容器（.right-包装）上中求出。

因此，DIV的100％的高度将根据最终.container高度中求出，以及.right位置的最终位置将根据在父容器上被中求出。

Answer 6:

这是一个简单的方法来实现这一目标：

1. 设置三个元素的容器（#outer）显示：表
2. 并设置元件本身（#inner）显示：表小区
3. 去除浮。
4. 成功。

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

由于在@Itay 抹灰格，100％的高度

Answer 7:

如果你准备用一个小的jQuery，答案很简单！

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

这非常适用于浮动的单个元件，以用100％的高度的侧的它的父，而这通常会环绕其它浮动元素被保持到一侧。

希望这有助于同胞jQuery的球迷。

Answer 8:

这对于具有高度相等网格系统中的代码示例。

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

以上是外层div的CSS

#inner{
width: 20%;
float: left;
border: 1px solid;
}

以上是内部的div

希望这有助于您

Answer 9:

这帮助了我。

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

改变右：和左：设置优选#inner宽度。

Answer 10:

当你需要几个子元素具有相同的高度可以实现Flexbox来解决类似的案例：

https://css-tricks.com/using-flexbox/

设置display: flex; 对于亲和flex: 1; 子元素，它们都具有相同的高度。

Answer 11:

尝试

#outer{overflow: auto;}

显示更多选项： 你如何保持浮动元素的父母从倒塌？

文章来源: How to make a floated div 100% height of its parent?