最小高度：100％;高度：100％;不工作

I cant figure out what is wrong with my styles.
Hope someone could help me with this.
Code example:

我无法弄清楚我的风格有什么问题。希望有人可以帮助我。代码示例:

<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>

The way it should be is like in Opera Browser (see image): 最小高度：100％;高度：100％;不工作

它的应用方式就像在Opera Browser中一样(见图):

3 个解决方案

#1

The How

http://jsfiddle.net/L9GEa/

The Why

One might intuitively assume (as I once did) that the html element already has a determined height, but it does not (at least in this context). Luckily (or by design) this one element has the unique property of it's height being determinable when it is assigned a percentage height. That is the essential concept because in order to calculate (determine) the height of any other element which is assigned a percentage height you must also be able to determine the height of it's parent.

人们可能会直观地假设(正如我曾经做过的那样)html元素已经确定了高度,但它没有(至少在这种情况下)。幸运的是(或通过设计)这个元素具有独特的属性,当它被赋予百分比高度时,它的高度是可以确定的。这是必不可少的概念,因为为了计算(确定)指定百分比高度的任何其他元素的高度,您还必须能够确定其父级的高度。

Anyone that has worked with CSS and the DOM enough likely will tell you they hate floats. This is because it pulls the element out of the flow, which requires additional work and thinking to juggle the effects. Instead use display:inline-block;vertical-align:top; with the one caveat that you will then have to add html comments around any white space between those elements.

任何使用过CSS和DOM的人都会告诉你他们讨厌花车。这是因为它将元素从流中拉出,这需要额外的工作并且想要兼顾效果。而是使用display:inline-block; vertical-align:top;有一点需要注意的是,您必须在这些元素之间的任何空白处添加html注释。

The 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%;
}

The 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>

#2

add

html,
body {
  height:100%
}

at the top of your css, that works for me

在你的CSS的顶部,这对我有用

EDIT: my test :

编辑:我的测试:

<!DOCTYPE html>
<html>

<head>
<style>
html,
body {
height:100%;
}

.maindiv {
   overflow:hidden; border:#000 1px solid;
    width:450px; height:100%;
position:relative;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; background:#00CC33;
position:relative;
}
.right_inner {
    float:left; width:150px; background:#C93;
}
</style>
</head>
<body>
<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>
</body>
</html>

#3

Try this:

    <style type="text/css">
.maindiv {
    overflow:hidden; border:#000 1px solid;
    width:450px; height: auto; min-height:250px;
}
.left_inner {
    float:left; width:200px;
    min-height:100%; 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>

Most of the time you have to apply a height of auto or 100% to the parent DIV.

大多数情况下,您必须将auto或100%的高度应用于父DIV。

#1