CSS가있는 동적 높이 자동 크기 조정

Question

내부에 두 개의 자식이있는 div가 있는데 그 중 하나는 표시되지 않고 (표시 : 없음) 다른 하나는 아버지의 전체 공간을 차지하지만 javascript에 표시 할 때 숨겨진 다른 autoredimensiones 자바 스크립트를 사용하지 않고 왼쪽 공간에?

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

자바 스크립트 :

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

Answer 1

이 순수 CSS 달성 할 수는 없지만, 당신은 추가에 대한 괜찮아 경우 조금 더 자바 스크립트 (클래스 이름을 추가하기 위해), 그때 그것을 얻을 수 있습니다 :

개정 자바 스크립트 :

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합니다.