做一個UL繼承Div的最小高度/高度

我想讓我的UL標籤是在一個div裏面繼承div的高度。做一個UL繼承Div的最小高度/高度

這裏是我的代碼：

HTML：

<div class="xyz"> 
     <ul id="abc"> 
      <li><a href="#">Reviews</a></li> 
      <li><a href="#">Opinions</a></li> 
      <li><a href="#">About</a></li> 
     </ul> 
    </div>

CSS：

.xyz { 
      min-height: 85%; 
    } 

    .xyz #abc{ 
      min-height: inherit; 
    }

我想從DIV繼承的高度，或至少將其設置在％的Div的內部

任何幫助將是非常有益的！

來源

2016-12-06 rashmeePrakash

了'ul'素有「ABC」，不是一類的ID。應該是'.xyz＃abc'選擇器 – hackerrdave

對不起，這就是它是什麼...我在這裏輸入我的代碼時犯了一個錯誤 – rashmeePrakash

CSS高度不適用於文檔正常流程中的元素，除非每個並且每個父元素都有其高度設置。 –

由於.xyz沒有一個明確的高度，以#abc垂直百分比將無法正常工作。

但如果你只是想#abc完全填充.xyz，您可以使用Flexbox的：

.xyz { 
 
    min-height: 85%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.xyz #abc { 
 
    flex-grow: 1; /* Grow to fill available space */ 
 
} 
 
/* Non-relevant styles: */ 
 
.xyz { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; 
 
    border: 10px solid blue; 
 
} 
 
.xyz #abc { 
 
    border: 10px solid red; 
 
    width: 50%; 
 
    margin: 0; 
 
}

<div class="xyz"> 
 
    <ul id="abc"> 
 
    <li><a href="#">Reviews</a></li> 
 
    <li><a href="#">Opinions</a></li> 
 
    <li><a href="#">About</a></li> 
 
    </ul> 
 
</div>

來源

2016-12-06 01:47:21 Oriol

太棒了！這完美的作品！ – rashmeePrakash

@rashmeePrakash請注意，Flexbox無法在IE10及更低版本中使用。 –

你的UI元素是一個「身份證」和CSS來反映這應該是一個「＃」

.xyz #abc{ ....

來源

2016-12-06 01:25:18

對不起...那是什麼...我在這裏輸入我的代碼時犯了一個錯誤 – rashmeePrakash

好吧，你的div包裹在哪裏？ 85％的高度究竟是什麼？ –

我正在製作一個視差網頁。所以這個視差頁面有100％的最小高度，其中我有一個包含2個div的div。類=「xyz」的那個設置爲85％，我希望UL（id =「abc」）也具有特定的高度，因爲如果我將它設置爲px，那麼它的大小會有所不同，具體取決於屏幕的大小。 – rashmeePrakash

做一個UL繼承Div的最小高度/高度

回答

相關問題