最小高度:100%;高度:100%;不工作
问题描述:
我无法弄清楚我的风格有什么问题。
希望有人能帮助我。
代码示例:最小高度: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浏览器(见图片):
答
该如何
的为什么
- 有人可能会认为直觉(我曾经做过)的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%;
}
<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>
答
试试这个:
<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>
大多数时候,你必须时刻对父DIV应用自动或100%的高度。
答
添加
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>
你有一个DOCTYPE HTML的? – 2012-01-09 15:01:03
@MrLister:如果他没有,他可以参考:http://www.w3schools.com/tags/tag_doctype.asp – 2012-01-09 15:02:29
是的我有文档类型: – wzazza 2012-01-09 15:04:21