我正在尝试创建面临对齐问题的页面。Jsp 页面在 localhost 中运行良好。但是当我使用 IP 地址时,这是一些对齐问题。
你能帮我解决这个问题吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script src="<%=request.getContextPath() %>/TSStatic/javascript/jquery-1.7.1.min.js"></script>
<script>
$(window).on('load resize',function(){
$('#col3').css({top:$('#col2').height()});
});
</script>
<style type="text/css">
html,body{height:100%;margin:0;padding:0}
html>body{
margin-left: auto ;
margin-right: auto ;
width: 984px;
min-width: 953px;
max-width: 1260px;
}
#col1{
overflow:hidden;
position:absolute;
width:100%;
top:136px;
bottom:15px;
}
#col2{
background-color:green;
overflow:hidden;
position:absolute;
height : auto;
width : 984px;
}
#col3{
background-color :pink;
overflow:auto;
position:inherit;
top : 0px;;
bottom : 15px;
width : 100%;
float : left;
clear : both;
display: inline-block;
}
#top{
position:absolute;
left:0;
width:984px;
top:0px;
height:136px;
background:red;
overflow:hidden;
}
#bottom{
position:absolute;
left:0;
width:984px;
height:30px;
bottom:0;
background:red;
overflow:hidden;
}
#wrap{
height:100%;
text-align:center;
display:block;
position:relative;
margin: 0 auto;
}
</style>
<!--[if lte IE 6 ]>
<style type="text/css">
* html {padding:330px 0 20px}
* html body{padding:330px 0 20px;padd\ing:0;}
* html #col1,* html #col2, * html #col3{
height:100%;
position:static;
float:left;
}
* html #top, * html #bottom{
clear:both;
left:50%;
margin-left:-380px;
}
* html #wrap{
width:860px;
margin:auto;
position:relative;
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="top">
<h1>Header</h1>
</div>
<div id="col1">
<div id="col2">
</div>
<div id="col3">
</div>
</div>
<div id="bottom">
Footer
</div>
</div>
</body>
</html>