動態高度自動調整大小與CSS

因爲我可以有一個div裏面有兩個孩子，其中一個不顯示（顯示：無），另一個佔據父親的整個空間，但是當我告訴javascript顯示隱藏其他autoredimensiones左空間不使用JavaScript？動態高度自動調整大小與CSS

HTML：

<div class="parent"> 
    <div class="child1" id="id1"> 
    </div> 
    <div class="child2"> 
    </div> 
</div>

CSS：

.parent { 
    height: 200px; 
    background-color: red; 
} 
.child2 { 
    height: 100%; 
    background-color: blue; 
} 
.child1 { 
    display:none; 
    height: 50px; 
    background-color: green; 
}

的javascript：

var myDiv = document.getElementById('id1'); 
myDiv.style.display="block";

來源

2012-05-23 intropedro

你不能用純CSS做到這一點。你將不得不使用某種形式的javascript – tedski

你的意思是，垂直空間？ – eveevans

Wait..'height'？你想在高度上發生什麼？ –

這不能用純CSS來實現，但如果你沒事有關添加更多的JavaScript（爲了添加一個類名），那麼它可以實現：

修訂的JavaScript：

var myDiv = document.getElementById('id1'); 
myDiv.style.display = "block"; 
myDiv.className += ' nowShown';

追加CSS：

.child1.nowShown { 
    float: left; 
    width: 50%; 
} 

.child1.nowShown + .child2 { 
    display: inline-block; 
    width: 50%; 
}

JS Fiddle proof-of-concept。

否則，這是不可能的，只是因爲CSS缺乏確定元素的視覺/狀態的能力。如果它有一個:visible僞類，那麼它是可能的，但沒有這樣的，如目前，它是可悲的不是。

改編上述證明的概念來實現略微低於簡潔肘節：

function showDiv1() { 
    var myDiv = document.getElementById('id1'), 
     cN = myDiv.className; 
    myDiv.style.display = "block"; 

    if (cN.match(/nowShown/)){ 
     myDiv.className = cN.replace(/nowShown/,''); 
     myDiv.style.display = 'none'; 
    } 
    else { 
     myDiv.className += ' nowShown'; 
    } 
    nC = myDiv.className; 
    myDiv.className = nC.replace(/\s{2,}/,' '); 
} 

document.getElementsByTagName('button')[0].onclick = function(){ 
    showDiv1(); 
};

JS Fiddle demo。

來源

2012-05-23 18:00:02

動態高度自動調整大小與CSS

回答

相關問題