如何使浮動div的父級100％高度？

Question

這是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高度，如果#outer的高度是auto ， 除非 #outer絕對定位。 然后#inner height將為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所說，對齊項目是父項，其默認值實際上是拉伸 。 如果你想為孩子提供不同的價值，那就是align-self屬性。

編輯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

我舉了一個例子來解決你的問題。

你必須做一個包裝，漂浮它，然后絕對你的div，並給它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是絕對定位的。 這意味着它的寬度和高度，以及頂部和左側位置將基於第一個父div絕對或相對定位來計算，如果在CSS中顯式聲明了width或height屬性; 如果它們不是聲明的，那么將根據父容器（.right-wrapper）計算這些屬性。

因此，DIV的100％高度將根據.container最終高度計算，並且.right位置的最終位置將根據父容器計算。

Answer 6

這是實現這一目標的更簡單方法：

1. 設置三個元素的容器（#outer）display：table
2. 並設置元素本身（#inner）display：table-cell
3. 刪除浮動。
4. 成功。

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

感謝@Itay in Floated div，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;}

顯示更多選項： 如何讓浮動元素的父母不會崩潰？