使用float和clear进行DIV左右布局后，在下面想再加个DIV高度自适应屏幕，但用height:100%不正确，怎么办？
HTML代码如下：<html><body><divstyle="border:solidblack1px;height:100%;"><divclass="clearfi...
HTML代码如下：
<html>
<body>
<div style="border:solid black 1px; height:100%;">
<div class="clearfix">
<div style="background: gray; width:50px;height:50px;float:left;"></div>
<div style="background: yellow; float:left;width:50px;height:50px;"></div>
<div style="clear:both"></div>
</div>
<div style="background: green; height:100%">test</div>
</div>
</body>
</html>
可以看到，最下面这个div的高度设置为100%并不会把上面两个DIV的高度计算在内，导致滚动条超出了。
再试了一下，关键问题还不是因为有float，而是上下排列的两个DIV，其中一个固定高度，另一个100%，那这个100%不是像table那样填满剩余部分而是等于父容器的高度。
<html>
<style>
html body{
padding: 0px;
margin:0px;
}
</style>
<body>
<div style="height:100%">
<div style="height:50px; background:gray;"></div>
<div style="height:100%; background:yellow"></div>
</div>
</body>
</html>
这个问题该如何解决呢？不能用table，只能用div。 展开
<html>
<body>
<div style="border:solid black 1px; height:100%;">
<div class="clearfix">
<div style="background: gray; width:50px;height:50px;float:left;"></div>
<div style="background: yellow; float:left;width:50px;height:50px;"></div>
<div style="clear:both"></div>
</div>
<div style="background: green; height:100%">test</div>
</div>
</body>
</html>
可以看到，最下面这个div的高度设置为100%并不会把上面两个DIV的高度计算在内，导致滚动条超出了。
再试了一下，关键问题还不是因为有float，而是上下排列的两个DIV，其中一个固定高度，另一个100%，那这个100%不是像table那样填满剩余部分而是等于父容器的高度。
<html>
<style>
html body{
padding: 0px;
margin:0px;
}
</style>
<body>
<div style="height:100%">
<div style="height:50px; background:gray;"></div>
<div style="height:100%; background:yellow"></div>
</div>
</body>
</html>
这个问题该如何解决呢？不能用table，只能用div。 展开
5个回答
展开全部
那是因为你的div有默认的margin和padding,请设置
<style>
*{
margin:0;
padding:0;
}
</style>
这样就可以了
<style>
*{
margin:0;
padding:0;
}
</style>
这样就可以了
追问
这个完全不起作用啊
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
请不要填height，设置好宽度就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
*{
padding: 0px;
margin:0px;
}
padding: 0px;
margin:0px;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实你也可以通过js来实现，这样很方便的，而且兼容性很好
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.我采用的是DIV+CSS+JS，
2.是目前兼容大部浏览器的
3.目前这是我知道的最好方法：
具体内容如下，你可以参考，若真能解决你的问题，那就太好了：
样式文件如下：
#mside{ float:left; width:240px; margin: 0px; padding: 0px; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #990000; border-right-color: #990000; border-bottom-color: #990000; border-left-color: #990000; background-image: url(bg2.jpg); background-repeat: repeat-x; }
#mmain{
width:713px;_width:703px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px 10px 0px 10px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #990000;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
float: left;
}
div文件如下：
<div id="mside">
<div class="leftlanmubg">左侧栏目导航</div>
<div id="menu2">
<ul>
<li><a href="index.php?id=21">产品分类1</a></li>
<li><a href="index.php?id=22">产品分类2</a></li>
<li><a href="index.php?id=23">产品分类3</a></li>
<li><a href="index.php?id=24">产品分类4</a></li>
<li><a href="index.php?id=25">产品分类5</a></li>
<li><a href="index.php?id=21">产品分类6</a></li>
<li><a href="index.php?id=22">产品分类7</a></li>
<li><a href="index.php?id=23">产品分类8</a></li>
<li><a href="index.php?id=24">产品分类9</a></li>
<li><a href="index.php?id=24">产品分类10</a></li>
</ul>
</div>
<div class="leftico">
<a href="#"><img src="files/leftmenusico.jpg" ></a>
</div>
<br>
</div>
<div id="mmain">
<div id="conments">
右边内容
</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
function getHeight() {
var height = Math.max($("mmain").offsetHeight,$("mside").offsetHeight);
$("mmain").style.height = $("mside").style.height =(-4+height) + "px";
}
window.onload = function() {
getHeight();
}
</script>
2.是目前兼容大部浏览器的
3.目前这是我知道的最好方法：
具体内容如下，你可以参考，若真能解决你的问题，那就太好了：
样式文件如下：
#mside{ float:left; width:240px; margin: 0px; padding: 0px; border-top-width: 2px; border-right-width: 1px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #990000; border-right-color: #990000; border-bottom-color: #990000; border-left-color: #990000; background-image: url(bg2.jpg); background-repeat: repeat-x; }
#mmain{
width:713px;_width:703px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px 10px 0px 10px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #990000;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
float: left;
}
div文件如下：
<div id="mside">
<div class="leftlanmubg">左侧栏目导航</div>
<div id="menu2">
<ul>
<li><a href="index.php?id=21">产品分类1</a></li>
<li><a href="index.php?id=22">产品分类2</a></li>
<li><a href="index.php?id=23">产品分类3</a></li>
<li><a href="index.php?id=24">产品分类4</a></li>
<li><a href="index.php?id=25">产品分类5</a></li>
<li><a href="index.php?id=21">产品分类6</a></li>
<li><a href="index.php?id=22">产品分类7</a></li>
<li><a href="index.php?id=23">产品分类8</a></li>
<li><a href="index.php?id=24">产品分类9</a></li>
<li><a href="index.php?id=24">产品分类10</a></li>
</ul>
</div>
<div class="leftico">
<a href="#"><img src="files/leftmenusico.jpg" ></a>
</div>
<br>
</div>
<div id="mmain">
<div id="conments">
右边内容
</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id)
}
function getHeight() {
var height = Math.max($("mmain").offsetHeight,$("mside").offsetHeight);
$("mmain").style.height = $("mside").style.height =(-4+height) + "px";
}
window.onload = function() {
getHeight();
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
