浮动div不遵守高度值的问题

Question

我有一个页面，使用各种表格式显示值，以尝试使页面的正文自动填充页眉和页脚之间的空白部分。

在正文中，我浮动了两个div，左侧和右侧。右侧浮动的div设置为"height: 100%"，因为我想要使用一个插入式盒阴影来可视化地分割两个div的内容。只要左侧div中的内容不足以导致页面需要滚动条，所有这些都能正常工作。但是，一旦发生这种情况，右侧浮动的div似乎不再尊重其高度值，并且恢复其高度由其内容确定的状态。

jsFiddle工作演示：http://jsfiddle.net/ec3upxk7/4/ 停止工作的链接：http://jsfiddle.net/yw3vLess/2/ 这是工作示例的代码：

HTML：

<div class="container">
    <header class="header">
        <p>This is the header</p>
    </header>
    <section class="content">
        <div class="content-body">
            <div class="left-panel">
                <p>This is the content.</p>
            </div>
            <div class="right-panel">
                <p>This is not the content.</p>
            </div>
        </div>
    </section>
    <footer class="footer">
        <p>This is the footer.</p>
    </footer>
</div>

CSS：

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }

/* Essentials */
.container { display: table; }
.content { display: table-row; height: 100%; }
.content-body { display: table-cell; }

/* Aestetics */
.container { width: 100%; height: 100%; }
.header, .footer { padding: 10px 20px; background: #f7f7f7; }
.content-body { background: #e7e7e7; }

.left-panel {
    width: 50%;
    float: left;
}

.right-panel {
    width: 49.9%;
    height: 100%;
    float: right;
    box-shadow:
        inset 10px 0px 5px -7px rgba(0,0,0,0.5);
}

- achillesminor

---

它在Firefox和IE11中工作，顺便说一句，在Chrome中不行。 - sinisake

Answer 1

变更

float: right;

在右侧面板中。

display: inline-block;

这将使阴影具有100％的高度。

像这个fiddle一样：http://jsfiddle.net/yw3vLess/5/

- Stefan

---

谢谢，很抱歉现在才回复你，最近几天非常忙碌。解决方案非常好用！ - achillesminor

Answer 2

你可以尝试一下这个；

http://jsfiddle.net/tallrye/yw3vLess/4

.container-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
    width:100%;
}
.row-height {
    display:table-row;
}
.col-height {
     display:table-cell;
     float:none;
     width:49.9%;
 }

.col-top {
    vertical-align:top;
}

你可以在这篇文章中了解更多有关这个方法的内容：

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

希望这有所帮助。

- tallrye