html - 使用 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 概念验证。

否则这是不可能的，仅仅是因为 CSS 缺乏确定display元素的视觉/状态的能力。如果它有一个: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 小提琴演示。