float 和 height:100% of div 之间有什么问题
请参阅下面的 HTML：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: 1px solid red;
}
#MainDiv
{
width: 100%;
min-height: 200px;
height: auto;
border: 1px solid blue;
}
#Contents
{
width: 500px;
margin: 0 auto;
min-height: 100px;
height: auto;
border: 1px solid green;
}
#RContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid pink;
}
#LContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="MainDiv">
<div id="Contents">
<div id="RContents">
Right Contents
</div>
<div id="LContents">
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
</div>
</div>
</div>
</form>
</body>
</html>
以及此 JSFiddle 链接：
jsfiddle
我的示例中 float 和 height:100% 之间有什么问题？
如何强制 body 、 MainDiv 和 Contents div 与 LContents div 一起增长？
min-height 非常重要
提前致谢
Please see the HTML below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: 1px solid red;
}
#MainDiv
{
width: 100%;
min-height: 200px;
height: auto;
border: 1px solid blue;
}
#Contents
{
width: 500px;
margin: 0 auto;
min-height: 100px;
height: auto;
border: 1px solid green;
}
#RContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid pink;
}
#LContents
{
float: right;
width: 200px;
min-height: 50px;
height: auto;
border: 1px solid yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="MainDiv">
<div id="Contents">
<div id="RContents">
Right Contents
</div>
<div id="LContents">
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
Left Contents
<br />
</div>
</div>
</div>
</form>
</body>
</html>
And this JSFiddle link:
jsfiddle
What is the problem between float and height:100% in my example?
How can I force body , MainDiv and Contents divs To Grow With LContents div?
min-height s are so important
Thanks in advance
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
像这样：
http://jsfiddle.net/9TLFM/
我已经使用clear:both清除了浮动
并从 body 中删除宽度和高度
Like this:
http://jsfiddle.net/9TLFM/
I've cleared the floats using clear:both
and removed width and height from body
只需清除浮动即可。
在两个浮动 div 的末尾放置一个 div（仍在
#Contents内）。示例：
http://jsfiddle.net/Rj4jf/1/
just clear the floats.
Place a div at the end of both floated divs (still inside
#Contents).example:
http://jsfiddle.net/Rj4jf/1/
从
LContents中删除float: right，它似乎工作正常Fiddle: http://jsfiddle.net/Rj4jf/2/
Remove the
float: rightfromLContentsand it seems to work fineFiddle: http://jsfiddle.net/Rj4jf/2/
尝试将另一个带有clear:both的div放在“Contents”div的末尾：
Try to put another div with clear:both at the end of the "Contents" div: