Div的堆棧和填充父DIV

我有一個case：Div的堆棧和填充父DIV

<div id="parent" style="height:100%;"> 
    <div id="child1">Some content</div> 
    <div id="child2">Another content</div> 
</div>

有兩個要求：
1）每個孩子都應該擴大到父母的大小（100％）。
2）在某些情況下，應該爲其他「child2」中的用戶顯示「child1」。

那麼我怎麼可以在css中實現呢？

來源

2014-02-09 zapletnev

我不明白什麼您這裏需要。你能否詳細說明一下？ – Danield

不可能沒有javascript –

創建一個的jsfiddle你 - FIDDLE LINK

display:none和display: block是你在找什麼。

默認情況下隱藏所有子div（#parent div { display: none; }）。您想顯示的孩子（在這種情況下爲#child2）會被授予display:block以取消隱藏。 display: block;也使孩子有一個100％的高度。

正如一些有幫助的人指出的，您可能需要使用一些PHP/JavaScript/jQuery，具體取決於您要實現的目標。你目前使用的是類似PHP或jQuery的東西嗎？

HTML

<div id="parent"> 
    <div id="child1">Child 1</div> 
    <div id="child2">Child 2</div> 
</div>

CSS

#parent { 
    width: 400px; 
    height: 300px; 
    background: #F00; 
} 

#parent div { 
    background: #CCC; 
    height: 100%; 
    display: none; 
} 

#parent #child1 { 
    display: none; 
} 

#parent #child2 { 
    display: block; 
}

來源

2014-02-09 08:12:19 misterManSam

2）在某些情況下，應該爲其他「child2」中的用戶顯示「child1」。 –

試試這個：

#parent div { 
    min-width: 100%; 
}

現在，還有隱藏的div兩個選項。

您可以在服務器端執行此操作。
您使用JS來隱藏客戶端的div。

CSS不會隱藏條件上的元素。除非條件是屏幕相關的屬性。

服務器端：

if(condition == value) { 
    /* write the code for the div here */ 
} else { 
    /* don't write the div code on the first place. */ 
}

客戶端一樣，使用JS和if else相同的條件塊，然後顯示隱藏它。

提示隱藏的股利，

document.getElementById("child1").style.display = "none"; 
document.getElementById("child1").style.display = "block"; // for showing..

來源

2014-02-09 08:13:00

Div的堆棧和填充父DIV

回答

相關問題