最小高度：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浏览器（见图片）： Sample image

来源

2012-01-09 wzazza

你有一个DOCTYPE HTML的？ – 2012-01-09 15:01:03

@MrLister：如果他没有，他可以参考：http://www.w3schools.com/tags/tag_doctype.asp – 2012-01-09 15:02:29

是的我有文档类型： <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN“”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> – wzazza 2012-01-09 15:04:21

该如何

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

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

来源

2013-09-14 05:40:02

此解决方案适用于我，所以我将其标记为最佳答案。谢谢。 – wzazza 2013-09-18 16:10:35

根据我的经验，删除html注释并将字体大小设置为0，在你的内部容器/元素上设置字体大小，并且使用off-off显示内联块。 1rem – Ghost1 2017-09-20 08:47:14

试试这个：

<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％的高度。

来源

2012-01-09 14:59:45

作品中内联元素之间的空白区域，以及外部div的像素高度。 – danijar 2012-01-09 15:05:57

这没有奏效。 – wzazza 2012-01-09 15:09:06

@sharethis：如果在像素基上应用该值，则无法达到100％的CSS规则。 – 2012-01-09 15:11:25

添加

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>

来源

2012-04-04 03:09:29 Michel

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

回答

相关问题