Question

这是我的代码：

HTML：

<div class="container">
    <div class="boxLeftWrapper">
        <input/>
        <input/>
    </div>
    <div class="boxRightWrapper">

    </div>
</div>

CSS：

div , input {
    border: 1px solid #000000;
}

.container {
    display: -webkit-box;
    -webkit-box-orient : horizontal;
    -webkit-box-align : center;
    -webkit-box-pack : center;
}

input {
    display: block;
    height: 70px;
    -webkit-box-flex : 1;
    width: 100%;
}

.boxLeftWrapper {
    display: -webkit-box;
    -webkit-box-orient : vertical;
    -webkit-box-align : center;
    -webkit-box-pack : center;
    -webkit-box-flex : 1;
}

.boxRightWrapper {
    width: 300px;
    height: 100%;
}

高度：100％不适用于.boxRightWrapper。为什么？有没有办法让boxRightWrapper适合.container的高度？

Answer 1

如果容器没有固定的高度，那么其子容器将无法使用高度作为百分比，因为容器尚未确定其高度。

有一个css只能解决我用过的问题，就是将div有效地吸入其下面的空间

.boxRightWrapper {
    width: 300px;
    height: 100%;
    margin-bottom:-9999px;
    padding-bottom:9999px;
}

然后，这样你就不会看到它创造的所有空间都会隐藏溢出。哦，也删除了盒子对齐中心，因为那是将盒子推到底部。

.container {
    overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient : horizontal;
    /* -webkit-box-align : center; */
    -webkit-box-pack : center;
}

继承人http://jsfiddle.net/leighking2/vqgt07ds/

当容器的高度被其他元素拉伸时，height = 100％不起作用？

1 个答案: