Question

将元素填充到父元素时遇到了一些问题。

HTML

<div class="content">
    <div class="left">
        Some big content that should be big.
    </div>
    <div class="menu">Some menu</div>
    <div class="right">
        Small content
    </div>
</div>

CSS

    .content{
    background-color: white;
    border-color: black;
    border-style: solid;
    overflow: hidden;
}

.left{
    width: 100px;
    float: left;
    background-color: blue;
}

.right{
    width:calc(100% - 100px);
    float: right;
    background-color: red;
}

.menu{
    float:left;
    width:calc(100% - 100px);
}

http://jsfiddle.net/qrjt8ys7/3/

在这个例子中，我想填充蓝色和红色元素。一旦蓝色的内容变大，将取决于内容，下次是红色的内容。

包装器实际上并不容易，因为我无法使用绝对定位（或者我不知道如何做到这一点）。

我可以用CSS做到这一点，还是应该在JS中进行丑陋的计算？

Answer 1

你需要这样的东西：

 <div class="left">
    <p>
    Small content
    </p>
</div>

或代替段落我编辑了你的jsbin。干杯

Answer 2

我可以建议你这个解决方案： https://jsfiddle.net/maxim_mazurok/wmk4w81m/1/

.content{
    background-color: white;
    border-color: black;
    border-style: solid;
    overflow: hidden;
    position: relative;
}

.left{
    width: 100px;
    background-color: blue;
    position: absolute;
    height: 100%;
}

.right{
    width:calc(100% - 100px);
    float: right;
    background-color: red;
}

.menu{
    float:left;
    margin-left: 100px;
    width:calc(100% - 100px);
}

.wrapper{
    background-color: rgba(0, 0, 0, 0.15);
    padding: 2%;
}

如何将浮动元素填充到父级

2 个答案: