动态高度自动调整大小与CSS

Question

因为我可以有一个div里面有两个孩子，其中一个不显示（显示：无），另一个占据父亲的整个空间，但是当我告诉javascript显示隐藏其他autoredimensiones左空间不使用JavaScript？

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"; 

Answer 1

这不能用纯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。