Question

所以在我的页面上，我有两列布局--75％（左 - 蓝）和25％（右 - 红）。我无法填写红色栏目。在Chrome的检查员中，我看到container已归类<div>已垂直扩展到#left的大小，但我无法哄骗#right进行适当扩展。这里是我的css和html的jfiddle链接（如果你不想点击修补，那么代码本身就是这样）：

只需一个快速说明：在我的实际开发代码中，我不使用蓝色和红色（左右div背景颜色） - 我分别使用白色和海军蓝色。

http://jsfiddle.net/EG3zb/

<div class="container">
    <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id nunc bibendum ligula tempus interdum a ac urna. Fusce sed nunc molestie, consequat orci eu, vehicula orci. Suspendisse nec leo sit amet tellus varius feugiat. Maecenas lacinia neque euismod, tincidunt nisi et, fermentum ipsum. Vivamus ut gravida velit, vitae ultrices ante. Nullam varius mattis tellus, vitae consectetur tortor porttitor eu. Donec congue eros mauris. Ut consequat aliquam mattis. Aliquam non neque eros.</p>
    </div>
    <div id="right">
        Blah.
    </div>
</div>

随附的CSS：

.container {
    width: 100%;
    min-height: 100%;
    overflow: auto;
}

#left, #right {
    padding-top: 2%;
}

#left {
    float: left;
    width: 75%;
    color: #fff;
    background-color: blue;;
}

#right {
    float: right;
    width: 25%;
    background-color: red;
    color: #fff;
}

Answer 1

这是有效的

.container {
width: 100%;
min-height: 100%;
overflow: auto;
display:flex;
}
.container #left,.container #right{
    -webkit-flex: auto;
    -ms-flex:auto;
    flex:auto;
}

这是工作演示 http://jsfiddle.net/mauryaashish945/EG3zb/5/

Answer 2

而不是默认display:block，您可以使用display:table-cell，因此无需float:left\right：

#left, #right {
   display:table-cell;
}

Example

在CSS中扩展div高度

2 个答案: