css – min-height：100％;高度：100％;不工作

我不知道我的样式有什么问题.
希望有人可以帮助我.
代码示例：

<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浏览器(见图)：

解决方法

怎么样

http://jsfiddle.net/L9GEa/

为什么

>一个人可以直观地假设(就像我曾经做过的)html元素已经有一个确定的高度,但是它不(至少在这个上下文中).幸运的是(或通过设计)这个元素具有独特的属性,它的高度可以在分配一个百分比高度时被确定.这是基本概念,因为为了计算(确定)分配了百分比高度的任何其他元素的高度,您还必须能够确定其父级的高度.
>任何曾经使用CSS和DOM的人都可能会告诉你他们讨厌浮动.这是因为它将元素从流中拉出,这需要额外的工作和思考来弥补效果.而是使用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>

原文地址：https://www.jb51.cc/css/214548.html