css - 最小高度 :100%; height:100%; not working

Question

我想不通我的风格有什么问题。
希望有人能帮我解决这个问题。
代码示例:

<style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
<div class="maindiv">
    <div class="left_inner">Left Block content</div>
    <div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>

它应该像在 Opera 浏览器中一样(见图片):

Answer 1

方法

http://jsfiddle.net/L9GEa/

原因

1. 人们可能会直觉地假设(就像我曾经做过的那样)html 元素已经有一个确定的高度，但它并没有(至少在这种情况下)。幸运的是(或设计使然)这个元素具有独特的属性，即当它被分配一个百分比高度时，它的高度是可确定的。这是基本概念，因为为了计算(确定)分配了百分比高度的任何其他元素的高度，您还必须能够确定其父元素的高度。
2. 任何使用过 CSS 和 DOM 的人都可能会告诉您他们讨厌 float 。这是因为它将元素拉出流程，这需要额外的工作和思考来兼顾效果。而是使用 display:inline-block;vertical-align:top;，但需要注意的是，您必须在这些元素之间的任何空白处添加 html 注释。

CSS

.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px;min-height:250px;
    /*changes*/
    height:100%;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
.right_inner {
    float:left; width:150px; background:#C93;
    /*changes*/
    float:none;
    display:inline-block;
    vertical-align:top;
}
/*changes*/
html,
body{
    height:100%;
}

HTML

<div class="maindiv">
    <div class="left_inner">Left Block content</div><!--
    --><div class="right_inner">Right block content<br />sample txt<br />sample txt</div>
</div>