CSS高度不從容器

這裏繼承是一個div容器有兩個浮動和一個常規的DIV裏面：CSS高度不從容器

<div style="width: 110%; min-height:250px;overflow:hidden; border: 4px solid red"> 
 

 
    <!-- divI --> 
 
    <div style="float:right; padding:25px; width:35%; border: 6px gray; border-style: hidden hidden hidden double "> 
 
    ....stuff 
 
    </div> 
 

 
    <!-- divII --> 
 
    <div style="float:right; padding: 25px; width:35%; border-left: 6px gray; border-style: hidden hidden hidden double; height:100% "> 
 
    ....stuff 
 
    </div> 
 

 
    <div> 
 
    .... stuff 
 
    </div> 
 
</div>

兩個浮動的div都在左側，灰色的邊框，其分開列。

除了灰色邊框之外，一切都正常呈現。 DivII比DivI短。容器div紅色邊框與div I邊框的底部相匹配，但divII的邊框不會繼承容器的高度並且太短。

我明白，浮動的div可能會造成這種麻煩，但我不知道如何解決它。

來源

2017-06-16 Betty Mock

問題是你指定父母上的min-height，但期望孩子繼承height。您應該在父母上使用height或在孩子上使用min-height: inherit。

還必須說您確實don't want to use inline styling，主要是由於其high specificity（只有內嵌!important擊敗了它）和DOM元素之間的必要重複。

關於兒童使用min-height: inherit：

.parent { 
 
    width: 110%; 
 
    min-height: 250px; 
 
    overflow: hidden; 
 
    border: 4px solid red; 
 
} 
 

 
.child { 
 
    float: right; 
 
    padding: 25px; 
 
    width: 35%; 
 
    border-left: 6px gray; 
 
    border-style: hidden hidden hidden double; 
 
    min-height: inherit; /* <-- use min-height here */ 
 
    height: 100%; 
 
}

<div class="parent"> 
 

 
    <div class="child">....stuff</div> 
 

 
    <div class="child">....stuff</div> 
 

 
    <div>.... stuff</div> 
 
</div>

父

使用height：

.parent { 
 
    width: 110%; 
 
    min-height: 250px; 
 
    height: 250px; /* <-- use height here */ 
 
    overflow: hidden; 
 
    border: 4px solid red; 
 
} 
 

 
.child { 
 
    float: right; 
 
    padding: 25px; 
 
    width: 35%; 
 
    border-left: 6px gray; 
 
    border-style: hidden hidden hidden double; 
 
    height: 100%; 
 
}

<div class="parent"> 
 

 
    <div class="child">....stuff</div> 
 

 
    <div class="child">....stuff</div> 
 

 
    <div>.... stuff</div> 
 
</div>

來源

2017-06-16 02:57:49 nem035

我想你建議什麼，最小高度：繼承，它並沒有區別。第二部分仍然很短。在容器div中放置一個特定的高度會導致子div被切斷。重新使用內聯樣式，當我在擺弄我想要的東西的時候使用它，然後當我知道它會是什麼時，將它移到CSS頁面。 –

@BettyMock你確定你沒有改變任何東西嗎？我在這裏附上了一個演示它工作的實例。點擊其中一個片段來運行它們。 – nem035

height:100%

ü忘記在烏拉圭回合第二個div

<div style="width: 110%; min-height:250px;overflow:hidden; border: 4px solid red"> 

    <!-- divI --> 
    <div style="float:right; padding:25px; width:35%; border-left: 6px gray; border-style: hidden hidden hidden double; height:100% "> 
    ....stuff 1 
    </div> 

    <!-- divII --> 
    <div style="float:right; padding: 25px; width:35%; border-left: 6px gray; border-style: hidden hidden hidden double; height:100% "> 
    ....stuff 2 
    </div> 

    <div> 
    .... stuff 
    </div> 
</div>

來源

2017-06-16 03:09:48

沒有什麼區別 –

CSS高度不從容器

回答

相關問題