CSS 最小高度：100%；高度：100%；不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8790311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
min-height:100%; height:100%; not working
提问by wzazza
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):
它应该像在 Opera 浏览器中一样（见图）：
采纳答案by Lance Caraccioli
The How
如何
The Why
为什么
- One might intuitively assume (as I once did) that the
htmlelement 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. - Anyone that has worked with CSS and the DOM enough likely will tell you they hatefloats. 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.
- 人们可能会直觉地假设（就像我曾经做过的那样）
html元素已经具有确定的高度，但事实并非如此（至少在这种情况下）。幸运的是（或通过设计），这个元素具有独特的属性，即当它被分配一个百分比高度时，它的高度是可确定的。这是基本概念，因为为了计算（确定）分配了百分比高度的任何其他元素的高度，您还必须能够确定其父元素的高度。 - 任何使用过 CSS 和 DOM 的人都可能会告诉你他们讨厌浮动。这是因为它将元素从流程中拉出，这需要额外的工作和思考来处理效果。而是使用
display:inline-block;vertical-align:top;一个警告，然后您必须在这些元素之间的任何空白周围添加 html 注释。
The CSS
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
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>
回答by Michel
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>
回答by Aaron Brewer
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.
大多数情况下，您必须对父 DIV 应用高度为 auto 或 100%。
