前端代码DIV+CSS关于定位
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>关于定位</title><style type="text/css">body { margin-left: 0px; margin-top: 0px; margin-right: 00px;}#header{ width:800px; height:30px; background-color:#9F9; }#main{ width:800px; height:auto; background-color:#FF6; position:relative; } #one{ width:300px; height:200px; background-color:#F30; position:absolute; left:0px; top:0px; }#tow{ width:490px; height:200px; background-color:#93F; position:absolute; left:310px; top:0px; }#three{ width:400px; height:200px; background-color:#390; position:absolute; left:0px; top:210px; }#four{ width:390px; height:200px; background-color:#66F; position:absolute; left:410px; top:210px; } #foot{ width:960px; height:30px; background-color:#3C9; }</style></head><body><div align="center"><div id="header" align="center">头部</div><div id="main"><div id="one">one</div><div id="tow">tow</div><div id="three">three</div><div id="four">four</div></div><div id="foot" align="left">版权</div></div></body></html>上述代码显示效果如图一，如何更改，可以显示成图二，请大神指教。
实际不止4个块，13-17是以条件显示，有时显示，有时不显示，#main的高度不能固定 展开
实际不止4个块，13-17是以条件显示，有时显示，有时不显示，#main的高度不能固定 展开
4个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>关于定位</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div align="center">
<div id="header" align="center">头部</div>
<div id="main">
<div id="one">one</div>
<div id="tow">tow</div>
<div id="three">three</div>
<div id="four">four</div>
</div>
<div id="foot" align="left">版权</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var last = $("#main>div").last();
var top = last.css("top").replace("px","");
top = parseInt(top);
var height = last.css("height").replace("px","");
height = parseInt(height);
var mainHeight = top + height;
$("#main").css("height", mainHeight + "px");
});
</script>
</html>
你的布局style都不用改，只需要在页面加载完成后，计算出div#main中的div占用的实际高度，并赋值给div#main。
计算原理：div#main中的每一个div都是设置了固定的top和height的，那么最后一个div的top+height肯定就是div#main的实际占用高度。
代码中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生写。还有什么问题就追问哈。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
四个色块因为是绝对定位，所以不占高度，类名main的高度就变成了0，底部foot当然就会贴上去。
要么把one two...四个色块改为display:block或者左浮动（记得父元素清除浮动）然后用边距来实现效果，要么就给main加适当高度就行
要么把one two...四个色块改为display:block或者左浮动（记得父元素清除浮动）然后用边距来实现效果，要么就给main加适当高度就行
追问
用浮动，在非兼容模式下，就乱了，Edge下乱的不能看
追答
这个是edge的问题，edge从某些方面说连IE都不如，如果浮动会乱，试试inline-block
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以选择给#main设置一个固定高度，比如
#main{ width:800px; height:410px; background-color:#FF6; position:relative;} 或者给#footer也设置定位或者上边距
#foot{margin-top: 410px;width:960px; height:30px; background-color:#3C9; }当然，看这道题的布局，用float方法其实更好
追问
main,中的快不止是4个，实际中有很多，13-17是以条件显示，不是完全显示，所以高度不能固定
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在font的div样式加上margin-top:410px;就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
