最小高度: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 Browser中一样(见图):
Lan*_*oli 13
如何
为什么
- 人们可能直观地假设(我曾经这样做过)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>
加
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>