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 Browser中一样（见图）： Sample image

Answer 1

如何

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>

Answer 2

添加

html,
body {
  height:100%
}

位于你的css顶部，对我有用

编辑：我的测试：

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

Answer 3

试试这个：

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

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

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

3 个答案: